<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>[提纲]前端-常用代码片段 | Plana(方案A)</title>
    <meta name="generator" content="VuePress 1.5.2">
    <link rel="icon" href="https://luo0412.gitee.io/static/images/logo/favicon.ico">
    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>$(function () {
    $(".navbar .dropdown-wrapper .title").each(function (index, item) {
        var title = $(item).text() || ""
        console.log(title)
        var index = title.indexOf("(")
        if (index > -1) {
            $(item).text(title.slice(0, index))
        }
    })
})

((window.gitter = {}).chat = {}).options = {
    room: 'luo0412/plana'
};</script>
    <script src="https://sidecar.gitter.im/dist/sidecar.v1.js"></script>
    <meta name="description" content="方案A">
    <link rel="preload" href="/plana/assets/css/0.styles.e9cba6b3.css" as="style"><link rel="preload" href="/plana/assets/js/app.26a35d46.js" as="script"><link rel="preload" href="/plana/assets/js/2.b5bc497d.js" as="script"><link rel="preload" href="/plana/assets/js/379.8567246b.js" as="script"><link rel="prefetch" href="/plana/assets/js/10.76967f04.js"><link rel="prefetch" href="/plana/assets/js/100.5188df2c.js"><link rel="prefetch" href="/plana/assets/js/101.d84c20f9.js"><link rel="prefetch" href="/plana/assets/js/102.dcbad92b.js"><link rel="prefetch" href="/plana/assets/js/103.cbf31594.js"><link rel="prefetch" href="/plana/assets/js/104.227d809c.js"><link rel="prefetch" href="/plana/assets/js/105.4690789d.js"><link rel="prefetch" href="/plana/assets/js/106.76527743.js"><link rel="prefetch" href="/plana/assets/js/107.d6e3a4d6.js"><link rel="prefetch" href="/plana/assets/js/108.6e4c8bfc.js"><link rel="prefetch" href="/plana/assets/js/109.fc12471e.js"><link rel="prefetch" href="/plana/assets/js/11.569e93dd.js"><link rel="prefetch" href="/plana/assets/js/110.85c3d834.js"><link rel="prefetch" href="/plana/assets/js/111.9c605bc7.js"><link rel="prefetch" href="/plana/assets/js/112.12b9e5d6.js"><link rel="prefetch" href="/plana/assets/js/113.21ac7878.js"><link rel="prefetch" href="/plana/assets/js/114.e4dd9de7.js"><link rel="prefetch" href="/plana/assets/js/115.8600fa46.js"><link rel="prefetch" href="/plana/assets/js/116.043898d2.js"><link rel="prefetch" href="/plana/assets/js/117.5c6253ed.js"><link rel="prefetch" href="/plana/assets/js/118.0deaa07b.js"><link rel="prefetch" href="/plana/assets/js/119.0e1b78e7.js"><link rel="prefetch" href="/plana/assets/js/12.f97471e0.js"><link rel="prefetch" href="/plana/assets/js/120.da2dcbe4.js"><link rel="prefetch" href="/plana/assets/js/121.b67072a1.js"><link rel="prefetch" href="/plana/assets/js/122.4438dfd8.js"><link rel="prefetch" href="/plana/assets/js/123.ffb881d0.js"><link rel="prefetch" href="/plana/assets/js/124.ae643d5d.js"><link rel="prefetch" href="/plana/assets/js/125.782ff172.js"><link rel="prefetch" href="/plana/assets/js/126.9cb23b0a.js"><link rel="prefetch" href="/plana/assets/js/127.2c5e040e.js"><link rel="prefetch" href="/plana/assets/js/128.f96c3297.js"><link rel="prefetch" href="/plana/assets/js/129.379dad87.js"><link rel="prefetch" href="/plana/assets/js/13.40058c53.js"><link rel="prefetch" href="/plana/assets/js/130.f350d8cd.js"><link rel="prefetch" href="/plana/assets/js/131.9b494f44.js"><link rel="prefetch" href="/plana/assets/js/132.8a6c409e.js"><link rel="prefetch" href="/plana/assets/js/133.c691db55.js"><link rel="prefetch" href="/plana/assets/js/134.e8d8a94a.js"><link rel="prefetch" href="/plana/assets/js/135.c95a1ef6.js"><link rel="prefetch" href="/plana/assets/js/136.bdd4250b.js"><link rel="prefetch" href="/plana/assets/js/137.539d6db6.js"><link rel="prefetch" href="/plana/assets/js/138.c16e3cc1.js"><link rel="prefetch" href="/plana/assets/js/139.7a1243ca.js"><link rel="prefetch" href="/plana/assets/js/14.880c2d4f.js"><link rel="prefetch" href="/plana/assets/js/140.6ed0a182.js"><link rel="prefetch" href="/plana/assets/js/141.a984158d.js"><link rel="prefetch" href="/plana/assets/js/142.e094f73f.js"><link rel="prefetch" href="/plana/assets/js/143.760a5510.js"><link rel="prefetch" href="/plana/assets/js/144.212ede62.js"><link rel="prefetch" href="/plana/assets/js/145.2e06e4c9.js"><link rel="prefetch" href="/plana/assets/js/146.16713494.js"><link rel="prefetch" href="/plana/assets/js/147.7b0585c3.js"><link rel="prefetch" href="/plana/assets/js/148.ae82990b.js"><link rel="prefetch" href="/plana/assets/js/149.73a7c703.js"><link rel="prefetch" href="/plana/assets/js/15.5364aa14.js"><link rel="prefetch" href="/plana/assets/js/150.fec18e0b.js"><link rel="prefetch" href="/plana/assets/js/151.14bf6cea.js"><link rel="prefetch" href="/plana/assets/js/152.17f17b04.js"><link rel="prefetch" href="/plana/assets/js/153.ba7c5f21.js"><link rel="prefetch" href="/plana/assets/js/154.d3340db4.js"><link rel="prefetch" href="/plana/assets/js/155.2bf1dbde.js"><link rel="prefetch" href="/plana/assets/js/156.70d23de7.js"><link rel="prefetch" href="/plana/assets/js/157.93a62465.js"><link rel="prefetch" href="/plana/assets/js/158.bf486b60.js"><link rel="prefetch" href="/plana/assets/js/159.f19e7955.js"><link rel="prefetch" href="/plana/assets/js/16.e96c9bd3.js"><link rel="prefetch" href="/plana/assets/js/160.3dc61d59.js"><link rel="prefetch" href="/plana/assets/js/161.0fff4227.js"><link rel="prefetch" href="/plana/assets/js/162.70526488.js"><link rel="prefetch" href="/plana/assets/js/163.faa79f0a.js"><link rel="prefetch" href="/plana/assets/js/164.9c80b5bb.js"><link rel="prefetch" href="/plana/assets/js/165.7f9b0124.js"><link rel="prefetch" href="/plana/assets/js/166.36435978.js"><link rel="prefetch" href="/plana/assets/js/167.feea7028.js"><link rel="prefetch" href="/plana/assets/js/168.cc504d5f.js"><link rel="prefetch" href="/plana/assets/js/169.ec7d4b8a.js"><link rel="prefetch" href="/plana/assets/js/17.07c08387.js"><link rel="prefetch" href="/plana/assets/js/170.a8b4b58d.js"><link rel="prefetch" href="/plana/assets/js/171.2329fa88.js"><link rel="prefetch" href="/plana/assets/js/172.286ac28f.js"><link rel="prefetch" href="/plana/assets/js/173.a692852e.js"><link rel="prefetch" href="/plana/assets/js/174.a39922f0.js"><link rel="prefetch" href="/plana/assets/js/175.b47f1b23.js"><link rel="prefetch" href="/plana/assets/js/176.86486ead.js"><link rel="prefetch" href="/plana/assets/js/177.40f1c5b7.js"><link rel="prefetch" href="/plana/assets/js/178.7a9ca10d.js"><link rel="prefetch" href="/plana/assets/js/179.19051ac2.js"><link rel="prefetch" href="/plana/assets/js/18.e433f8d3.js"><link rel="prefetch" href="/plana/assets/js/180.57d0c928.js"><link rel="prefetch" href="/plana/assets/js/181.00da0f3d.js"><link rel="prefetch" href="/plana/assets/js/182.cadb79df.js"><link rel="prefetch" href="/plana/assets/js/183.8dd3881a.js"><link rel="prefetch" href="/plana/assets/js/184.1222a110.js"><link rel="prefetch" href="/plana/assets/js/185.7d9330c8.js"><link rel="prefetch" href="/plana/assets/js/186.d6ddbb60.js"><link rel="prefetch" href="/plana/assets/js/187.f19bfcc2.js"><link rel="prefetch" href="/plana/assets/js/188.b801053a.js"><link rel="prefetch" href="/plana/assets/js/189.9bf68bd8.js"><link rel="prefetch" href="/plana/assets/js/19.0f82fe28.js"><link rel="prefetch" href="/plana/assets/js/190.158c0b50.js"><link rel="prefetch" href="/plana/assets/js/191.cdca9aef.js"><link rel="prefetch" href="/plana/assets/js/192.84164400.js"><link rel="prefetch" href="/plana/assets/js/193.6fee8315.js"><link rel="prefetch" href="/plana/assets/js/194.646a3bc9.js"><link rel="prefetch" href="/plana/assets/js/195.f63862f4.js"><link rel="prefetch" href="/plana/assets/js/196.4b0d972c.js"><link rel="prefetch" href="/plana/assets/js/197.e706ce3c.js"><link rel="prefetch" href="/plana/assets/js/198.8b9720bf.js"><link rel="prefetch" href="/plana/assets/js/199.49a5e793.js"><link rel="prefetch" href="/plana/assets/js/20.619cb712.js"><link rel="prefetch" href="/plana/assets/js/200.ef546dd9.js"><link rel="prefetch" href="/plana/assets/js/201.479054ec.js"><link rel="prefetch" href="/plana/assets/js/202.0b3389ee.js"><link rel="prefetch" href="/plana/assets/js/203.22150890.js"><link rel="prefetch" href="/plana/assets/js/204.2dc71336.js"><link rel="prefetch" href="/plana/assets/js/205.e377c245.js"><link rel="prefetch" href="/plana/assets/js/206.1ace4feb.js"><link rel="prefetch" href="/plana/assets/js/207.323fa10a.js"><link rel="prefetch" href="/plana/assets/js/208.e353a6ec.js"><link rel="prefetch" href="/plana/assets/js/209.316ac6f0.js"><link rel="prefetch" href="/plana/assets/js/21.d91a849c.js"><link rel="prefetch" href="/plana/assets/js/210.d4f18535.js"><link rel="prefetch" href="/plana/assets/js/211.573c492b.js"><link rel="prefetch" href="/plana/assets/js/212.b2a16387.js"><link rel="prefetch" href="/plana/assets/js/213.c2fac0b1.js"><link rel="prefetch" href="/plana/assets/js/214.79b62576.js"><link rel="prefetch" href="/plana/assets/js/215.fe6c3e10.js"><link rel="prefetch" href="/plana/assets/js/216.18f410e2.js"><link rel="prefetch" href="/plana/assets/js/217.20c9e9eb.js"><link rel="prefetch" href="/plana/assets/js/218.a0eeeb7c.js"><link rel="prefetch" href="/plana/assets/js/219.b956aca7.js"><link rel="prefetch" href="/plana/assets/js/22.366fc766.js"><link rel="prefetch" href="/plana/assets/js/220.5ed5e277.js"><link rel="prefetch" href="/plana/assets/js/221.468f9087.js"><link rel="prefetch" href="/plana/assets/js/222.638dc5f6.js"><link rel="prefetch" href="/plana/assets/js/223.0fad689f.js"><link rel="prefetch" href="/plana/assets/js/224.61ad16fd.js"><link rel="prefetch" href="/plana/assets/js/225.91089e6c.js"><link rel="prefetch" href="/plana/assets/js/226.2f0d158a.js"><link rel="prefetch" href="/plana/assets/js/227.43288d9d.js"><link rel="prefetch" href="/plana/assets/js/228.4bff0625.js"><link rel="prefetch" href="/plana/assets/js/229.9c3666b2.js"><link rel="prefetch" href="/plana/assets/js/23.d2ecdcc9.js"><link rel="prefetch" href="/plana/assets/js/230.b52057f9.js"><link rel="prefetch" href="/plana/assets/js/231.cc0ed124.js"><link rel="prefetch" href="/plana/assets/js/232.9ad374c5.js"><link rel="prefetch" href="/plana/assets/js/233.d794c11f.js"><link rel="prefetch" href="/plana/assets/js/234.26ac8fbc.js"><link rel="prefetch" href="/plana/assets/js/235.41250663.js"><link rel="prefetch" href="/plana/assets/js/236.881374a2.js"><link rel="prefetch" href="/plana/assets/js/237.c7bd84e0.js"><link rel="prefetch" href="/plana/assets/js/238.98726af2.js"><link rel="prefetch" href="/plana/assets/js/239.9f11e102.js"><link rel="prefetch" href="/plana/assets/js/24.02b55c75.js"><link rel="prefetch" href="/plana/assets/js/240.a7cac4ef.js"><link rel="prefetch" href="/plana/assets/js/241.462a960b.js"><link rel="prefetch" href="/plana/assets/js/242.7cf42754.js"><link rel="prefetch" href="/plana/assets/js/243.b3d1619f.js"><link rel="prefetch" href="/plana/assets/js/244.40da516b.js"><link rel="prefetch" href="/plana/assets/js/245.ada0c168.js"><link rel="prefetch" href="/plana/assets/js/246.38614800.js"><link rel="prefetch" href="/plana/assets/js/247.491612a2.js"><link rel="prefetch" href="/plana/assets/js/248.23741832.js"><link rel="prefetch" href="/plana/assets/js/249.90624a3a.js"><link rel="prefetch" href="/plana/assets/js/25.96e9e495.js"><link rel="prefetch" href="/plana/assets/js/250.f5946779.js"><link rel="prefetch" href="/plana/assets/js/251.58091edf.js"><link rel="prefetch" href="/plana/assets/js/252.fbe32ae4.js"><link rel="prefetch" href="/plana/assets/js/253.1cdd8f1c.js"><link rel="prefetch" href="/plana/assets/js/254.651e7bc6.js"><link rel="prefetch" href="/plana/assets/js/255.58aaa830.js"><link rel="prefetch" href="/plana/assets/js/256.08653b0a.js"><link rel="prefetch" href="/plana/assets/js/257.18da3dda.js"><link rel="prefetch" href="/plana/assets/js/258.e639b138.js"><link rel="prefetch" href="/plana/assets/js/259.9a2ccdd8.js"><link rel="prefetch" href="/plana/assets/js/26.786f768e.js"><link rel="prefetch" href="/plana/assets/js/260.1ffec687.js"><link rel="prefetch" href="/plana/assets/js/261.6f007b8c.js"><link rel="prefetch" href="/plana/assets/js/262.eebd1210.js"><link rel="prefetch" href="/plana/assets/js/263.1672d254.js"><link rel="prefetch" href="/plana/assets/js/264.a786f2f0.js"><link rel="prefetch" href="/plana/assets/js/265.b08f361a.js"><link rel="prefetch" href="/plana/assets/js/266.6b9c1b18.js"><link rel="prefetch" href="/plana/assets/js/267.05341052.js"><link rel="prefetch" href="/plana/assets/js/268.2b47894a.js"><link rel="prefetch" href="/plana/assets/js/269.b00e1745.js"><link rel="prefetch" href="/plana/assets/js/27.d95cd926.js"><link rel="prefetch" href="/plana/assets/js/270.f09aa40d.js"><link rel="prefetch" href="/plana/assets/js/271.036eefbf.js"><link rel="prefetch" href="/plana/assets/js/272.685451a2.js"><link rel="prefetch" href="/plana/assets/js/273.489debcf.js"><link rel="prefetch" href="/plana/assets/js/274.3f824bc5.js"><link rel="prefetch" href="/plana/assets/js/275.d3661899.js"><link rel="prefetch" href="/plana/assets/js/276.0dd18e5e.js"><link rel="prefetch" href="/plana/assets/js/277.1ec17e71.js"><link rel="prefetch" href="/plana/assets/js/278.6379871f.js"><link rel="prefetch" href="/plana/assets/js/279.a0692e92.js"><link rel="prefetch" href="/plana/assets/js/28.c63f738d.js"><link rel="prefetch" href="/plana/assets/js/280.34932565.js"><link rel="prefetch" href="/plana/assets/js/281.ae742fd5.js"><link rel="prefetch" href="/plana/assets/js/282.715175d9.js"><link rel="prefetch" href="/plana/assets/js/283.9b6a3e34.js"><link rel="prefetch" href="/plana/assets/js/284.00628265.js"><link rel="prefetch" href="/plana/assets/js/285.3de0dd73.js"><link rel="prefetch" href="/plana/assets/js/286.6a2d6c2a.js"><link rel="prefetch" href="/plana/assets/js/287.74cdf243.js"><link rel="prefetch" href="/plana/assets/js/288.42fdbe73.js"><link rel="prefetch" href="/plana/assets/js/289.f4afe8dc.js"><link rel="prefetch" href="/plana/assets/js/29.84c2f6be.js"><link rel="prefetch" href="/plana/assets/js/290.6fad3c29.js"><link rel="prefetch" href="/plana/assets/js/291.b0ad0381.js"><link rel="prefetch" href="/plana/assets/js/292.888b58ac.js"><link rel="prefetch" href="/plana/assets/js/293.1ed605a6.js"><link rel="prefetch" href="/plana/assets/js/294.3af3dec3.js"><link rel="prefetch" href="/plana/assets/js/295.db08edcf.js"><link rel="prefetch" href="/plana/assets/js/296.e4837fb2.js"><link rel="prefetch" href="/plana/assets/js/297.25eb8cb6.js"><link rel="prefetch" href="/plana/assets/js/298.4948e1d0.js"><link rel="prefetch" href="/plana/assets/js/299.56ff4927.js"><link rel="prefetch" href="/plana/assets/js/3.27803fd3.js"><link rel="prefetch" href="/plana/assets/js/30.a9337659.js"><link rel="prefetch" href="/plana/assets/js/300.8dad7bd4.js"><link rel="prefetch" href="/plana/assets/js/301.1d0bd3b7.js"><link rel="prefetch" href="/plana/assets/js/302.24c7060b.js"><link rel="prefetch" href="/plana/assets/js/303.a4a7908d.js"><link rel="prefetch" href="/plana/assets/js/304.d5a32c16.js"><link rel="prefetch" href="/plana/assets/js/305.eb22a5e4.js"><link rel="prefetch" href="/plana/assets/js/306.cdaa56b9.js"><link rel="prefetch" href="/plana/assets/js/307.f7e38353.js"><link rel="prefetch" href="/plana/assets/js/308.3f3f49e6.js"><link rel="prefetch" href="/plana/assets/js/309.ba1c34b9.js"><link rel="prefetch" href="/plana/assets/js/31.f4ff74a7.js"><link rel="prefetch" href="/plana/assets/js/310.06e88629.js"><link rel="prefetch" href="/plana/assets/js/311.7cadacd8.js"><link rel="prefetch" href="/plana/assets/js/312.36004dd0.js"><link rel="prefetch" href="/plana/assets/js/313.efb51116.js"><link rel="prefetch" href="/plana/assets/js/314.55c74d14.js"><link rel="prefetch" href="/plana/assets/js/315.fc4d91f4.js"><link rel="prefetch" href="/plana/assets/js/316.dde0feb1.js"><link rel="prefetch" href="/plana/assets/js/317.ef59c7dd.js"><link rel="prefetch" href="/plana/assets/js/318.9c8514de.js"><link rel="prefetch" href="/plana/assets/js/319.e934bf23.js"><link rel="prefetch" href="/plana/assets/js/32.611da568.js"><link rel="prefetch" href="/plana/assets/js/320.2c3bf800.js"><link rel="prefetch" href="/plana/assets/js/321.2f166a58.js"><link rel="prefetch" href="/plana/assets/js/322.2727112d.js"><link rel="prefetch" href="/plana/assets/js/323.987dae09.js"><link rel="prefetch" href="/plana/assets/js/324.059197e5.js"><link rel="prefetch" href="/plana/assets/js/325.251603a9.js"><link rel="prefetch" href="/plana/assets/js/326.b9aa9786.js"><link rel="prefetch" href="/plana/assets/js/327.83df42f2.js"><link rel="prefetch" href="/plana/assets/js/328.437841b5.js"><link rel="prefetch" href="/plana/assets/js/329.4705178f.js"><link rel="prefetch" href="/plana/assets/js/33.04179be5.js"><link rel="prefetch" href="/plana/assets/js/330.7fefbd39.js"><link rel="prefetch" href="/plana/assets/js/331.324b88a4.js"><link rel="prefetch" href="/plana/assets/js/332.9dbc0a0f.js"><link rel="prefetch" href="/plana/assets/js/333.a9f4ba89.js"><link rel="prefetch" href="/plana/assets/js/334.bfc521ff.js"><link rel="prefetch" href="/plana/assets/js/335.ea772c69.js"><link rel="prefetch" href="/plana/assets/js/336.3c139a73.js"><link rel="prefetch" href="/plana/assets/js/337.4b7b5285.js"><link rel="prefetch" href="/plana/assets/js/338.40b3bfdb.js"><link rel="prefetch" href="/plana/assets/js/339.bf0c2419.js"><link rel="prefetch" href="/plana/assets/js/34.7d7532c6.js"><link rel="prefetch" href="/plana/assets/js/340.9ceb2f7a.js"><link rel="prefetch" href="/plana/assets/js/341.bc48efb9.js"><link rel="prefetch" href="/plana/assets/js/342.75077914.js"><link rel="prefetch" href="/plana/assets/js/343.efda7d56.js"><link rel="prefetch" href="/plana/assets/js/344.31c0f3c6.js"><link rel="prefetch" href="/plana/assets/js/345.7fb06b95.js"><link rel="prefetch" href="/plana/assets/js/346.55ccf355.js"><link rel="prefetch" href="/plana/assets/js/347.98aa9eab.js"><link rel="prefetch" href="/plana/assets/js/348.878dac49.js"><link rel="prefetch" href="/plana/assets/js/349.878acfca.js"><link rel="prefetch" href="/plana/assets/js/35.a56a078a.js"><link rel="prefetch" href="/plana/assets/js/350.67d85dec.js"><link rel="prefetch" href="/plana/assets/js/351.fe864f55.js"><link rel="prefetch" href="/plana/assets/js/352.0140a20d.js"><link rel="prefetch" href="/plana/assets/js/353.1a2bdf26.js"><link rel="prefetch" href="/plana/assets/js/354.e698b263.js"><link rel="prefetch" href="/plana/assets/js/355.69178048.js"><link rel="prefetch" href="/plana/assets/js/356.13571020.js"><link rel="prefetch" href="/plana/assets/js/357.666a6e4e.js"><link rel="prefetch" href="/plana/assets/js/358.3a859aae.js"><link rel="prefetch" href="/plana/assets/js/359.e6291586.js"><link rel="prefetch" href="/plana/assets/js/36.6b2c1c06.js"><link rel="prefetch" href="/plana/assets/js/360.553be648.js"><link rel="prefetch" href="/plana/assets/js/361.f674d762.js"><link rel="prefetch" href="/plana/assets/js/362.41696f0b.js"><link rel="prefetch" href="/plana/assets/js/363.db6b18e5.js"><link rel="prefetch" href="/plana/assets/js/364.f4ef8d66.js"><link rel="prefetch" href="/plana/assets/js/365.060bb2cd.js"><link rel="prefetch" href="/plana/assets/js/366.af8be9cf.js"><link rel="prefetch" href="/plana/assets/js/367.89b9bd1a.js"><link rel="prefetch" href="/plana/assets/js/368.4a0db9f9.js"><link rel="prefetch" href="/plana/assets/js/369.0f137c05.js"><link rel="prefetch" href="/plana/assets/js/37.a372e2ff.js"><link rel="prefetch" href="/plana/assets/js/370.d0503cfb.js"><link rel="prefetch" href="/plana/assets/js/371.a5a61f6c.js"><link rel="prefetch" href="/plana/assets/js/372.a8beeec6.js"><link rel="prefetch" href="/plana/assets/js/373.52486327.js"><link rel="prefetch" href="/plana/assets/js/374.becb79ef.js"><link rel="prefetch" href="/plana/assets/js/375.adbe845a.js"><link rel="prefetch" href="/plana/assets/js/376.0b725de7.js"><link rel="prefetch" href="/plana/assets/js/377.6d0755e8.js"><link rel="prefetch" href="/plana/assets/js/378.9899dca3.js"><link rel="prefetch" href="/plana/assets/js/38.bf139dae.js"><link rel="prefetch" href="/plana/assets/js/380.fff3aeb0.js"><link rel="prefetch" href="/plana/assets/js/381.5d8ddb4d.js"><link rel="prefetch" href="/plana/assets/js/382.ebb79c48.js"><link rel="prefetch" href="/plana/assets/js/383.b1d8b5be.js"><link rel="prefetch" href="/plana/assets/js/384.b8ef0439.js"><link rel="prefetch" href="/plana/assets/js/385.274ad089.js"><link rel="prefetch" href="/plana/assets/js/386.8dc07401.js"><link rel="prefetch" href="/plana/assets/js/387.aea18e98.js"><link rel="prefetch" href="/plana/assets/js/388.1ef06a0b.js"><link rel="prefetch" href="/plana/assets/js/389.9d65f18d.js"><link rel="prefetch" href="/plana/assets/js/39.5a4f8e59.js"><link rel="prefetch" href="/plana/assets/js/390.6bd12dc7.js"><link rel="prefetch" href="/plana/assets/js/391.6ef66911.js"><link rel="prefetch" href="/plana/assets/js/392.ffba56bb.js"><link rel="prefetch" href="/plana/assets/js/393.a5fc8fba.js"><link rel="prefetch" href="/plana/assets/js/394.6ab7521b.js"><link rel="prefetch" href="/plana/assets/js/395.3ab7f171.js"><link rel="prefetch" href="/plana/assets/js/396.0791500c.js"><link rel="prefetch" href="/plana/assets/js/397.28bf46c8.js"><link rel="prefetch" href="/plana/assets/js/398.7807db8d.js"><link rel="prefetch" href="/plana/assets/js/399.4d403b1b.js"><link rel="prefetch" href="/plana/assets/js/4.6af04a85.js"><link rel="prefetch" href="/plana/assets/js/40.43e4b38f.js"><link rel="prefetch" href="/plana/assets/js/400.c888a05f.js"><link rel="prefetch" href="/plana/assets/js/401.6dfdc401.js"><link rel="prefetch" href="/plana/assets/js/402.2836e580.js"><link rel="prefetch" href="/plana/assets/js/403.a8ec3c75.js"><link rel="prefetch" href="/plana/assets/js/404.5858ee05.js"><link rel="prefetch" href="/plana/assets/js/405.4fd5cbce.js"><link rel="prefetch" href="/plana/assets/js/406.059c34fc.js"><link rel="prefetch" href="/plana/assets/js/407.1991324f.js"><link rel="prefetch" href="/plana/assets/js/408.57f13ab2.js"><link rel="prefetch" href="/plana/assets/js/409.b3fdbf19.js"><link rel="prefetch" href="/plana/assets/js/41.baf41ad2.js"><link rel="prefetch" href="/plana/assets/js/410.1c66b59b.js"><link rel="prefetch" href="/plana/assets/js/411.89daa103.js"><link rel="prefetch" href="/plana/assets/js/412.5fd17d05.js"><link rel="prefetch" href="/plana/assets/js/413.67df2b20.js"><link rel="prefetch" href="/plana/assets/js/414.7c1feaab.js"><link rel="prefetch" href="/plana/assets/js/415.e07db45d.js"><link rel="prefetch" href="/plana/assets/js/416.fe7e2c62.js"><link rel="prefetch" href="/plana/assets/js/417.c9f94e9c.js"><link rel="prefetch" href="/plana/assets/js/418.18704cfc.js"><link rel="prefetch" href="/plana/assets/js/419.9f113e64.js"><link rel="prefetch" href="/plana/assets/js/42.f2884796.js"><link rel="prefetch" href="/plana/assets/js/420.2a5f3a3f.js"><link rel="prefetch" href="/plana/assets/js/421.1b110d49.js"><link rel="prefetch" href="/plana/assets/js/422.b836f5a4.js"><link rel="prefetch" href="/plana/assets/js/423.9fa437af.js"><link rel="prefetch" href="/plana/assets/js/424.0fc0a623.js"><link rel="prefetch" href="/plana/assets/js/425.4bee6afc.js"><link rel="prefetch" href="/plana/assets/js/426.036d5a1b.js"><link rel="prefetch" href="/plana/assets/js/427.f2a1aa48.js"><link rel="prefetch" href="/plana/assets/js/428.fc22796c.js"><link rel="prefetch" href="/plana/assets/js/429.b6acfba5.js"><link rel="prefetch" href="/plana/assets/js/43.7aa39e52.js"><link rel="prefetch" href="/plana/assets/js/430.ed97aa43.js"><link rel="prefetch" href="/plana/assets/js/431.2fc0d4e3.js"><link rel="prefetch" href="/plana/assets/js/432.43115b63.js"><link rel="prefetch" href="/plana/assets/js/433.a1c3b83a.js"><link rel="prefetch" href="/plana/assets/js/434.ee152248.js"><link rel="prefetch" href="/plana/assets/js/435.24976c8a.js"><link rel="prefetch" href="/plana/assets/js/436.59dd1ab1.js"><link rel="prefetch" href="/plana/assets/js/437.50136991.js"><link rel="prefetch" href="/plana/assets/js/438.5eb6bf82.js"><link rel="prefetch" href="/plana/assets/js/439.9e310ae5.js"><link rel="prefetch" href="/plana/assets/js/44.ea8da77b.js"><link rel="prefetch" href="/plana/assets/js/440.2457f927.js"><link rel="prefetch" href="/plana/assets/js/441.fbc13ad6.js"><link rel="prefetch" href="/plana/assets/js/442.d130c4b3.js"><link rel="prefetch" href="/plana/assets/js/443.1f900823.js"><link rel="prefetch" href="/plana/assets/js/444.3834d598.js"><link rel="prefetch" href="/plana/assets/js/445.16932093.js"><link rel="prefetch" href="/plana/assets/js/446.24711545.js"><link rel="prefetch" href="/plana/assets/js/447.568b3f96.js"><link rel="prefetch" href="/plana/assets/js/448.8883fa0d.js"><link rel="prefetch" href="/plana/assets/js/449.f6184633.js"><link rel="prefetch" href="/plana/assets/js/45.73a9f625.js"><link rel="prefetch" href="/plana/assets/js/450.a996511c.js"><link rel="prefetch" href="/plana/assets/js/451.1b1843f7.js"><link rel="prefetch" href="/plana/assets/js/452.0be6db8b.js"><link rel="prefetch" href="/plana/assets/js/453.2c9eca27.js"><link rel="prefetch" href="/plana/assets/js/454.43d6b922.js"><link rel="prefetch" href="/plana/assets/js/455.798dc8d2.js"><link rel="prefetch" href="/plana/assets/js/456.5294aa61.js"><link rel="prefetch" href="/plana/assets/js/457.582336be.js"><link rel="prefetch" href="/plana/assets/js/458.3ae86239.js"><link rel="prefetch" href="/plana/assets/js/459.17fe935e.js"><link rel="prefetch" href="/plana/assets/js/46.6c8e3280.js"><link rel="prefetch" href="/plana/assets/js/460.e3ca3d89.js"><link rel="prefetch" href="/plana/assets/js/461.9f892ebc.js"><link rel="prefetch" href="/plana/assets/js/462.57d0ad29.js"><link rel="prefetch" href="/plana/assets/js/463.a1965841.js"><link rel="prefetch" href="/plana/assets/js/464.d0da0b56.js"><link rel="prefetch" href="/plana/assets/js/465.6cb0dd50.js"><link rel="prefetch" href="/plana/assets/js/466.272ea41f.js"><link rel="prefetch" href="/plana/assets/js/467.9c04d6bf.js"><link rel="prefetch" href="/plana/assets/js/468.b91655c9.js"><link rel="prefetch" href="/plana/assets/js/469.e4727b4f.js"><link rel="prefetch" href="/plana/assets/js/47.3909e74a.js"><link rel="prefetch" href="/plana/assets/js/470.b11beb41.js"><link rel="prefetch" href="/plana/assets/js/471.4753cb89.js"><link rel="prefetch" href="/plana/assets/js/472.29077ff8.js"><link rel="prefetch" href="/plana/assets/js/473.a653331c.js"><link rel="prefetch" href="/plana/assets/js/474.2a8fae88.js"><link rel="prefetch" href="/plana/assets/js/475.9b78390f.js"><link rel="prefetch" href="/plana/assets/js/476.9e13c339.js"><link rel="prefetch" href="/plana/assets/js/477.05a2179e.js"><link rel="prefetch" href="/plana/assets/js/478.9c4f06c9.js"><link rel="prefetch" href="/plana/assets/js/479.559e2b93.js"><link rel="prefetch" href="/plana/assets/js/48.be057863.js"><link rel="prefetch" href="/plana/assets/js/480.ec41e7ce.js"><link rel="prefetch" href="/plana/assets/js/481.113c6aa3.js"><link rel="prefetch" href="/plana/assets/js/482.40e20309.js"><link rel="prefetch" href="/plana/assets/js/483.689e3d97.js"><link rel="prefetch" href="/plana/assets/js/484.069ebf35.js"><link rel="prefetch" href="/plana/assets/js/485.9e7bd20f.js"><link rel="prefetch" href="/plana/assets/js/486.c163809d.js"><link rel="prefetch" href="/plana/assets/js/487.acdd4863.js"><link rel="prefetch" href="/plana/assets/js/488.6075f8e7.js"><link rel="prefetch" href="/plana/assets/js/489.77207a01.js"><link rel="prefetch" href="/plana/assets/js/49.64cd900d.js"><link rel="prefetch" href="/plana/assets/js/490.2bb176f4.js"><link rel="prefetch" href="/plana/assets/js/491.07e739a2.js"><link rel="prefetch" href="/plana/assets/js/492.e07a5eee.js"><link rel="prefetch" href="/plana/assets/js/493.333ffb97.js"><link rel="prefetch" href="/plana/assets/js/494.ef208677.js"><link rel="prefetch" href="/plana/assets/js/495.a1f2d8cb.js"><link rel="prefetch" href="/plana/assets/js/496.6f6a823a.js"><link rel="prefetch" href="/plana/assets/js/497.c44b60d1.js"><link rel="prefetch" href="/plana/assets/js/498.2b898143.js"><link rel="prefetch" href="/plana/assets/js/499.366c11df.js"><link rel="prefetch" href="/plana/assets/js/5.6d71262c.js"><link rel="prefetch" href="/plana/assets/js/50.b2d0e32a.js"><link rel="prefetch" href="/plana/assets/js/500.c2769d0d.js"><link rel="prefetch" href="/plana/assets/js/501.5db31a91.js"><link rel="prefetch" href="/plana/assets/js/502.6550f71c.js"><link rel="prefetch" href="/plana/assets/js/503.bcac8e8e.js"><link rel="prefetch" href="/plana/assets/js/504.defc6a0c.js"><link rel="prefetch" href="/plana/assets/js/505.6db6e3e2.js"><link rel="prefetch" href="/plana/assets/js/506.1be6db54.js"><link rel="prefetch" href="/plana/assets/js/507.e3063e28.js"><link rel="prefetch" href="/plana/assets/js/508.9fcc5bc1.js"><link rel="prefetch" href="/plana/assets/js/509.69b407c9.js"><link rel="prefetch" href="/plana/assets/js/51.98c6fcd6.js"><link rel="prefetch" href="/plana/assets/js/510.78cc9b58.js"><link rel="prefetch" href="/plana/assets/js/511.890e750c.js"><link rel="prefetch" href="/plana/assets/js/512.54f5237b.js"><link rel="prefetch" href="/plana/assets/js/513.71e81daf.js"><link rel="prefetch" href="/plana/assets/js/514.43eff2c4.js"><link rel="prefetch" href="/plana/assets/js/515.267a0ebd.js"><link rel="prefetch" href="/plana/assets/js/516.619a751e.js"><link rel="prefetch" href="/plana/assets/js/517.7e7b4f57.js"><link rel="prefetch" href="/plana/assets/js/518.4b5b069f.js"><link rel="prefetch" href="/plana/assets/js/519.cecd2dba.js"><link rel="prefetch" href="/plana/assets/js/52.51175da9.js"><link rel="prefetch" href="/plana/assets/js/520.d61eaea1.js"><link rel="prefetch" href="/plana/assets/js/521.1bdd256d.js"><link rel="prefetch" href="/plana/assets/js/522.9eb89cb1.js"><link rel="prefetch" href="/plana/assets/js/523.c21b0f67.js"><link rel="prefetch" href="/plana/assets/js/524.e8e2b891.js"><link rel="prefetch" href="/plana/assets/js/525.5d527982.js"><link rel="prefetch" href="/plana/assets/js/526.06ac5112.js"><link rel="prefetch" href="/plana/assets/js/527.9fb3036e.js"><link rel="prefetch" href="/plana/assets/js/528.fc9e2c1b.js"><link rel="prefetch" href="/plana/assets/js/529.9334c6ad.js"><link rel="prefetch" href="/plana/assets/js/53.4db53b65.js"><link rel="prefetch" href="/plana/assets/js/530.d069e448.js"><link rel="prefetch" href="/plana/assets/js/531.6b5d9a6c.js"><link rel="prefetch" href="/plana/assets/js/532.b288face.js"><link rel="prefetch" href="/plana/assets/js/533.dd36700a.js"><link rel="prefetch" href="/plana/assets/js/534.430379e3.js"><link rel="prefetch" href="/plana/assets/js/535.5b1ec919.js"><link rel="prefetch" href="/plana/assets/js/536.62d48a69.js"><link rel="prefetch" href="/plana/assets/js/537.e4ba4cc0.js"><link rel="prefetch" href="/plana/assets/js/538.2ba0b7b5.js"><link rel="prefetch" href="/plana/assets/js/539.44d94e0a.js"><link rel="prefetch" href="/plana/assets/js/54.4ecc183c.js"><link rel="prefetch" href="/plana/assets/js/540.58126542.js"><link rel="prefetch" href="/plana/assets/js/541.8a2719d4.js"><link rel="prefetch" href="/plana/assets/js/542.63823f7d.js"><link rel="prefetch" href="/plana/assets/js/543.fd601531.js"><link rel="prefetch" href="/plana/assets/js/544.c2d41a95.js"><link rel="prefetch" href="/plana/assets/js/545.c0f15057.js"><link rel="prefetch" href="/plana/assets/js/546.752d4411.js"><link rel="prefetch" href="/plana/assets/js/547.05b54675.js"><link rel="prefetch" href="/plana/assets/js/548.9c781add.js"><link rel="prefetch" href="/plana/assets/js/549.f1400ef4.js"><link rel="prefetch" href="/plana/assets/js/55.eea26142.js"><link rel="prefetch" href="/plana/assets/js/550.1c4c183f.js"><link rel="prefetch" href="/plana/assets/js/551.a6ea4558.js"><link rel="prefetch" href="/plana/assets/js/552.0d04b29e.js"><link rel="prefetch" href="/plana/assets/js/553.5c2ddf4f.js"><link rel="prefetch" href="/plana/assets/js/554.0a16293a.js"><link rel="prefetch" href="/plana/assets/js/555.015fced4.js"><link rel="prefetch" href="/plana/assets/js/556.6a698949.js"><link rel="prefetch" href="/plana/assets/js/557.fee4398a.js"><link rel="prefetch" href="/plana/assets/js/558.20023b16.js"><link rel="prefetch" href="/plana/assets/js/559.fd760ca6.js"><link rel="prefetch" href="/plana/assets/js/56.8bddb4ea.js"><link rel="prefetch" href="/plana/assets/js/560.27c09de9.js"><link rel="prefetch" href="/plana/assets/js/561.1b28b647.js"><link rel="prefetch" href="/plana/assets/js/562.de1b62da.js"><link rel="prefetch" href="/plana/assets/js/563.3e063e33.js"><link rel="prefetch" href="/plana/assets/js/564.fbdb4383.js"><link rel="prefetch" href="/plana/assets/js/565.6ac66720.js"><link rel="prefetch" href="/plana/assets/js/566.00ccbe3d.js"><link rel="prefetch" href="/plana/assets/js/567.822ff786.js"><link rel="prefetch" href="/plana/assets/js/568.2ebcf522.js"><link rel="prefetch" href="/plana/assets/js/569.ee2e3485.js"><link rel="prefetch" href="/plana/assets/js/57.ff655a80.js"><link rel="prefetch" href="/plana/assets/js/570.a9314e9d.js"><link rel="prefetch" href="/plana/assets/js/571.af242a14.js"><link rel="prefetch" href="/plana/assets/js/572.dff86d44.js"><link rel="prefetch" href="/plana/assets/js/573.060ed316.js"><link rel="prefetch" href="/plana/assets/js/574.ecea29a4.js"><link rel="prefetch" href="/plana/assets/js/575.a526b6e0.js"><link rel="prefetch" href="/plana/assets/js/576.1a856efd.js"><link rel="prefetch" href="/plana/assets/js/577.340a24d3.js"><link rel="prefetch" href="/plana/assets/js/578.1e87e5de.js"><link rel="prefetch" href="/plana/assets/js/579.ba400d0d.js"><link rel="prefetch" href="/plana/assets/js/58.6d7395ff.js"><link rel="prefetch" href="/plana/assets/js/580.8470a6ab.js"><link rel="prefetch" href="/plana/assets/js/581.24b8fa46.js"><link rel="prefetch" href="/plana/assets/js/582.11991e75.js"><link rel="prefetch" href="/plana/assets/js/583.1af0e850.js"><link rel="prefetch" href="/plana/assets/js/584.b671635d.js"><link rel="prefetch" href="/plana/assets/js/585.5ec10dae.js"><link rel="prefetch" href="/plana/assets/js/586.cf868939.js"><link rel="prefetch" href="/plana/assets/js/587.e937242b.js"><link rel="prefetch" href="/plana/assets/js/588.9993b844.js"><link rel="prefetch" href="/plana/assets/js/589.040b58f8.js"><link rel="prefetch" href="/plana/assets/js/59.d91c7a50.js"><link rel="prefetch" href="/plana/assets/js/590.7f347f61.js"><link rel="prefetch" href="/plana/assets/js/591.3acb8a8d.js"><link rel="prefetch" href="/plana/assets/js/592.c0fecc8a.js"><link rel="prefetch" href="/plana/assets/js/593.0ee76323.js"><link rel="prefetch" href="/plana/assets/js/594.7e15bb85.js"><link rel="prefetch" href="/plana/assets/js/595.b5540278.js"><link rel="prefetch" href="/plana/assets/js/596.2996c0fa.js"><link rel="prefetch" href="/plana/assets/js/597.3a3b9a07.js"><link rel="prefetch" href="/plana/assets/js/598.510c6ec5.js"><link rel="prefetch" href="/plana/assets/js/599.f7cd0ab9.js"><link rel="prefetch" href="/plana/assets/js/6.23e42cf9.js"><link rel="prefetch" href="/plana/assets/js/60.12c2a97e.js"><link rel="prefetch" href="/plana/assets/js/600.3a511d88.js"><link rel="prefetch" href="/plana/assets/js/601.1620fe4a.js"><link rel="prefetch" href="/plana/assets/js/602.92820a4e.js"><link rel="prefetch" href="/plana/assets/js/603.fa3b8f68.js"><link rel="prefetch" href="/plana/assets/js/604.a75f5d11.js"><link rel="prefetch" href="/plana/assets/js/605.6e16e44e.js"><link rel="prefetch" href="/plana/assets/js/606.3ca54f7c.js"><link rel="prefetch" href="/plana/assets/js/607.ed2521fd.js"><link rel="prefetch" href="/plana/assets/js/608.83c6a7b7.js"><link rel="prefetch" href="/plana/assets/js/609.cc5d05f6.js"><link rel="prefetch" href="/plana/assets/js/61.57554021.js"><link rel="prefetch" href="/plana/assets/js/610.e114869f.js"><link rel="prefetch" href="/plana/assets/js/611.4dfe17f1.js"><link rel="prefetch" href="/plana/assets/js/612.e9e7cdd9.js"><link rel="prefetch" href="/plana/assets/js/613.52fab004.js"><link rel="prefetch" href="/plana/assets/js/614.03e68635.js"><link rel="prefetch" href="/plana/assets/js/615.b5b202c3.js"><link rel="prefetch" href="/plana/assets/js/616.55d3ec0f.js"><link rel="prefetch" href="/plana/assets/js/617.caa80506.js"><link rel="prefetch" href="/plana/assets/js/618.97c71cdd.js"><link rel="prefetch" href="/plana/assets/js/619.506d3336.js"><link rel="prefetch" href="/plana/assets/js/62.c471c2b6.js"><link rel="prefetch" href="/plana/assets/js/620.d265d33b.js"><link rel="prefetch" href="/plana/assets/js/621.c7274a04.js"><link rel="prefetch" href="/plana/assets/js/622.78f88193.js"><link rel="prefetch" href="/plana/assets/js/623.460ecfe4.js"><link rel="prefetch" href="/plana/assets/js/624.af5db8f4.js"><link rel="prefetch" href="/plana/assets/js/625.b8b56400.js"><link rel="prefetch" href="/plana/assets/js/626.5f935139.js"><link rel="prefetch" href="/plana/assets/js/627.5eae5139.js"><link rel="prefetch" href="/plana/assets/js/628.b76c4230.js"><link rel="prefetch" href="/plana/assets/js/629.b5df5447.js"><link rel="prefetch" href="/plana/assets/js/63.a859b22b.js"><link rel="prefetch" href="/plana/assets/js/630.b4353e1e.js"><link rel="prefetch" href="/plana/assets/js/631.f52d250f.js"><link rel="prefetch" href="/plana/assets/js/632.fb3cd435.js"><link rel="prefetch" href="/plana/assets/js/633.d11743c5.js"><link rel="prefetch" href="/plana/assets/js/634.f274f0f2.js"><link rel="prefetch" href="/plana/assets/js/635.e4b93eee.js"><link rel="prefetch" href="/plana/assets/js/636.ddfe36dc.js"><link rel="prefetch" href="/plana/assets/js/637.773dfbf9.js"><link rel="prefetch" href="/plana/assets/js/638.5d3283ef.js"><link rel="prefetch" href="/plana/assets/js/639.1182aa0e.js"><link rel="prefetch" href="/plana/assets/js/64.3933d035.js"><link rel="prefetch" href="/plana/assets/js/640.fc30215e.js"><link rel="prefetch" href="/plana/assets/js/641.8fa04f8c.js"><link rel="prefetch" href="/plana/assets/js/642.9adc9013.js"><link rel="prefetch" href="/plana/assets/js/643.c553c77d.js"><link rel="prefetch" href="/plana/assets/js/644.f45f12bc.js"><link rel="prefetch" href="/plana/assets/js/645.45551213.js"><link rel="prefetch" href="/plana/assets/js/646.20f8455d.js"><link rel="prefetch" href="/plana/assets/js/647.f83d8512.js"><link rel="prefetch" href="/plana/assets/js/648.d2116c6d.js"><link rel="prefetch" href="/plana/assets/js/649.7c63bf5a.js"><link rel="prefetch" href="/plana/assets/js/65.c73421f0.js"><link rel="prefetch" href="/plana/assets/js/650.a8d4d68c.js"><link rel="prefetch" href="/plana/assets/js/651.660dc950.js"><link rel="prefetch" href="/plana/assets/js/652.e4a8d299.js"><link rel="prefetch" href="/plana/assets/js/653.d5cb1829.js"><link rel="prefetch" href="/plana/assets/js/654.06347c17.js"><link rel="prefetch" href="/plana/assets/js/655.1407708a.js"><link rel="prefetch" href="/plana/assets/js/656.c8c6bc8b.js"><link rel="prefetch" href="/plana/assets/js/657.5bfffe54.js"><link rel="prefetch" href="/plana/assets/js/658.548e92c7.js"><link rel="prefetch" href="/plana/assets/js/659.e6f86d89.js"><link rel="prefetch" href="/plana/assets/js/66.db88a898.js"><link rel="prefetch" href="/plana/assets/js/660.68b4f9c1.js"><link rel="prefetch" href="/plana/assets/js/661.7c1843eb.js"><link rel="prefetch" href="/plana/assets/js/662.fd5c9c14.js"><link rel="prefetch" href="/plana/assets/js/663.2a29079b.js"><link rel="prefetch" href="/plana/assets/js/664.f7e273fb.js"><link rel="prefetch" href="/plana/assets/js/665.92739f4f.js"><link rel="prefetch" href="/plana/assets/js/666.c9dfc4da.js"><link rel="prefetch" href="/plana/assets/js/667.e4e37653.js"><link rel="prefetch" href="/plana/assets/js/668.753f6377.js"><link rel="prefetch" href="/plana/assets/js/669.26bfae22.js"><link rel="prefetch" href="/plana/assets/js/67.ad91902f.js"><link rel="prefetch" href="/plana/assets/js/670.a70329fc.js"><link rel="prefetch" href="/plana/assets/js/671.11637c8c.js"><link rel="prefetch" href="/plana/assets/js/672.9a3410bf.js"><link rel="prefetch" href="/plana/assets/js/673.5f4041b7.js"><link rel="prefetch" href="/plana/assets/js/674.7a725878.js"><link rel="prefetch" href="/plana/assets/js/675.d55427e9.js"><link rel="prefetch" href="/plana/assets/js/676.eb15c05a.js"><link rel="prefetch" href="/plana/assets/js/677.98c18ede.js"><link rel="prefetch" href="/plana/assets/js/678.db86b061.js"><link rel="prefetch" href="/plana/assets/js/679.972243d8.js"><link rel="prefetch" href="/plana/assets/js/68.3e6dcf8f.js"><link rel="prefetch" href="/plana/assets/js/680.d9e2eba1.js"><link rel="prefetch" href="/plana/assets/js/681.8e0783ae.js"><link rel="prefetch" href="/plana/assets/js/682.a0c2e943.js"><link rel="prefetch" href="/plana/assets/js/683.d9a0e0b6.js"><link rel="prefetch" href="/plana/assets/js/684.19b16b09.js"><link rel="prefetch" href="/plana/assets/js/685.1dfde878.js"><link rel="prefetch" href="/plana/assets/js/686.5ebd864b.js"><link rel="prefetch" href="/plana/assets/js/687.9d3c3ee0.js"><link rel="prefetch" href="/plana/assets/js/688.7a8d52a4.js"><link rel="prefetch" href="/plana/assets/js/689.43733f87.js"><link rel="prefetch" href="/plana/assets/js/69.0c93e68b.js"><link rel="prefetch" href="/plana/assets/js/690.b3cc0545.js"><link rel="prefetch" href="/plana/assets/js/691.f0c9f432.js"><link rel="prefetch" href="/plana/assets/js/692.fe5d277f.js"><link rel="prefetch" href="/plana/assets/js/693.f2a5bc91.js"><link rel="prefetch" href="/plana/assets/js/694.0afc8ee3.js"><link rel="prefetch" href="/plana/assets/js/695.02d143c2.js"><link rel="prefetch" href="/plana/assets/js/696.fc35e844.js"><link rel="prefetch" href="/plana/assets/js/697.59baff52.js"><link rel="prefetch" href="/plana/assets/js/698.32395aca.js"><link rel="prefetch" href="/plana/assets/js/699.49a455e0.js"><link rel="prefetch" href="/plana/assets/js/7.4d84b003.js"><link rel="prefetch" href="/plana/assets/js/70.02b035df.js"><link rel="prefetch" href="/plana/assets/js/71.50c27702.js"><link rel="prefetch" href="/plana/assets/js/72.d0b51e9d.js"><link rel="prefetch" href="/plana/assets/js/73.88fbc437.js"><link rel="prefetch" href="/plana/assets/js/74.4323b154.js"><link rel="prefetch" href="/plana/assets/js/75.c07fede3.js"><link rel="prefetch" href="/plana/assets/js/76.d17b982e.js"><link rel="prefetch" href="/plana/assets/js/77.2c2c823d.js"><link rel="prefetch" href="/plana/assets/js/78.6339cdb8.js"><link rel="prefetch" href="/plana/assets/js/79.08610500.js"><link rel="prefetch" href="/plana/assets/js/8.28fd7fea.js"><link rel="prefetch" href="/plana/assets/js/80.fd045bb2.js"><link rel="prefetch" href="/plana/assets/js/81.c563629a.js"><link rel="prefetch" href="/plana/assets/js/82.f186782c.js"><link rel="prefetch" href="/plana/assets/js/83.5b829c7f.js"><link rel="prefetch" href="/plana/assets/js/84.0edd8a25.js"><link rel="prefetch" href="/plana/assets/js/85.cb1c8ff9.js"><link rel="prefetch" href="/plana/assets/js/86.6e0b2f9b.js"><link rel="prefetch" href="/plana/assets/js/87.36b6b2f5.js"><link rel="prefetch" href="/plana/assets/js/88.a23a2afa.js"><link rel="prefetch" href="/plana/assets/js/89.765b2b9d.js"><link rel="prefetch" href="/plana/assets/js/9.59274a6f.js"><link rel="prefetch" href="/plana/assets/js/90.a62aad9b.js"><link rel="prefetch" href="/plana/assets/js/91.96d9b5fa.js"><link rel="prefetch" href="/plana/assets/js/92.b7f7e048.js"><link rel="prefetch" href="/plana/assets/js/93.c7a06bfe.js"><link rel="prefetch" href="/plana/assets/js/94.097b631a.js"><link rel="prefetch" href="/plana/assets/js/95.cdb222d4.js"><link rel="prefetch" href="/plana/assets/js/96.5a864796.js"><link rel="prefetch" href="/plana/assets/js/97.7478b98b.js"><link rel="prefetch" href="/plana/assets/js/98.c9fff4ca.js"><link rel="prefetch" href="/plana/assets/js/99.1e106589.js">
    <link rel="stylesheet" href="/plana/assets/css/0.styles.e9cba6b3.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/plana/" class="home-link router-link-active"><!----> <span class="site-name">Plana(方案A)</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Service Java(者)" class="dropdown-title"><span class="title">Service Java(者)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch1-core-oop/" class="nav-link">
  Core Oop
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch2-utils-crud/" class="nav-link">
  Utils Crud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch3-web-springboot/" class="nav-link">
  Web Springboot
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch4-micro-cloud/" class="nav-link">
  Micro Cloud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch5-devops-native/" class="nav-link">
  Devops Native
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch6-platform-faas/" class="nav-link">
  Platform Faas
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch7-perf-jvm/" class="nav-link">
  Perf Jvm
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch8-arch-pmp/" class="nav-link">
  Arch Pmp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Ui Javascript(皆)" class="dropdown-title"><span class="title">Ui Javascript(皆)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch1-core-prototype/" class="nav-link">
  Core Prototype
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch2-web3-html5/" class="nav-link">
  Web3 Html5
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch3-component-mvc/" class="nav-link router-link-active">
  Component Mvc
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch4-service-nodejs/" class="nav-link">
  Service Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/" class="nav-link">
  Devops Scaffold
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch6-hybrid-webapp/" class="nav-link">
  Hybrid Webapp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch7-visualizing-chart/" class="nav-link">
  Visualizing Chart
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch8-interaction-gl/" class="nav-link">
  Interaction Gl
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Data Python(数)" class="dropdown-title"><span class="title">Data Python(数)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch1-core-pymath/" class="nav-link">
  Core Pymath
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch2-utils-dataset/" class="nav-link">
  Utils Dataset
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch3-service-flask/" class="nav-link">
  Service Flask
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch4-bigdata-analysis/" class="nav-link">
  Bigdata Analysis
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch5-devops-auto/" class="nav-link">
  Devops Auto
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch6-ai-machine/" class="nav-link">
  Ai Machine
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch7-visualizing-gui/" class="nav-link">
  Visualizing Gui
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch8-control-embed/" class="nav-link">
  Control Embed
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于" class="dropdown-title"><span class="title">关于</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/luo0412" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/plana/about-me.html" class="nav-link">
  关于我
</a></li><li class="dropdown-item"><!----> <a href="/plana/md-style.html" class="nav-link">
  笔记风格
</a></li><li class="dropdown-item"><!----> <a href="/plana/related-links.html" class="nav-link">
  友情链接
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Service Java(者)" class="dropdown-title"><span class="title">Service Java(者)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch1-core-oop/" class="nav-link">
  Core Oop
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch2-utils-crud/" class="nav-link">
  Utils Crud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch3-web-springboot/" class="nav-link">
  Web Springboot
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch4-micro-cloud/" class="nav-link">
  Micro Cloud
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch5-devops-native/" class="nav-link">
  Devops Native
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch6-platform-faas/" class="nav-link">
  Platform Faas
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch7-perf-jvm/" class="nav-link">
  Perf Jvm
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch8-arch-pmp/" class="nav-link">
  Arch Pmp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.3.service-java/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Ui Javascript(皆)" class="dropdown-title"><span class="title">Ui Javascript(皆)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch1-core-prototype/" class="nav-link">
  Core Prototype
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch2-web3-html5/" class="nav-link">
  Web3 Html5
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch3-component-mvc/" class="nav-link router-link-active">
  Component Mvc
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch4-service-nodejs/" class="nav-link">
  Service Nodejs
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch5-devops-scaffold/" class="nav-link">
  Devops Scaffold
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch6-hybrid-webapp/" class="nav-link">
  Hybrid Webapp
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch7-visualizing-chart/" class="nav-link">
  Visualizing Chart
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch8-interaction-gl/" class="nav-link">
  Interaction Gl
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.4.ui-javascript/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Data Python(数)" class="dropdown-title"><span class="title">Data Python(数)</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch1-core-pymath/" class="nav-link">
  Core Pymath
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch2-utils-dataset/" class="nav-link">
  Utils Dataset
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch3-service-flask/" class="nav-link">
  Service Flask
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch4-bigdata-analysis/" class="nav-link">
  Bigdata Analysis
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch5-devops-auto/" class="nav-link">
  Devops Auto
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch6-ai-machine/" class="nav-link">
  Ai Machine
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch7-visualizing-gui/" class="nav-link">
  Visualizing Gui
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch8-control-embed/" class="nav-link">
  Control Embed
</a></li><li class="dropdown-item"><!----> <a href="/plana/nav.5.data-python/ch9-code-interview/" class="nav-link">
  Code Interview
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="关于" class="dropdown-title"><span class="title">关于</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/luo0412" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/plana/about-me.html" class="nav-link">
  关于我
</a></li><li class="dropdown-item"><!----> <a href="/plana/md-style.html" class="nav-link">
  笔记风格
</a></li><li class="dropdown-item"><!----> <a href="/plana/related-links.html" class="nav-link">
  友情链接
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/" aria-current="page" class="sidebar-link">README</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/01--ti-gang--qian-duan-li-dai-shen-bing-li-qi.html" class="sidebar-link">[提纲]前端历代神兵利器</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/02--she-ji-yu-yan-materials.html" class="sidebar-link">设计语言(Materials)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/03--yang-shi-ku-tailwind.html" class="sidebar-link">样式库(Tailwind)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/04--han-shu-ku-lodash.html" class="sidebar-link">函数库(Lodash)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/05--ti-gang--shu-ju-biao-dan-form-file-db-crypto.html" class="sidebar-link">[M]表单+表格+存储</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/06--ti-gang--dong-xiao-zhuang-shi-dom-anim-icon-typo.html" class="sidebar-link">[E]动画+排版+色彩</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/07--ti-gang--bu-ju-dao-hang-grid-lazyload.html" class="sidebar-link">[L]布局+导航+面板</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/08--ti-gang--ye-wu-kuo-zhan-qrcode-player.html" class="sidebar-link">[T]工具+复合+扩展</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Cmpts</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/case/01--an-li--biao-dan-xiao-yan-validator.html" class="sidebar-link">[案例]表单校验(Validator)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/case/02--an-li--jing-dian-shu-cha-jian-ztree.html" class="sidebar-link">[案例]经典树插件(zTree)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/case/03--an-li--qian-duan-gong-shi-ji-suan-decimal.html" class="sidebar-link">[案例]前端公式计算(decimal)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/case/04--an-li--hua-ci-gao-liang-bi-ji.html" class="sidebar-link">[案例]划词高亮笔记</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/01--ti-gang-jquery--cha-jian-ku-cdn.html" class="sidebar-link">[提纲]jQuery插件库(CDN)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/02--ti-gang-react--zu-jian-ku.html" class="sidebar-link">[提纲]React组件库</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/03--ti-gang-vue--zu-jian-ku.html" class="sidebar-link">[提纲]Vue组件库</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/cmpts/05--fang-an--jing-dian-cha-jian--jian-rong-qian-yi-ueditor.html" class="sidebar-link">[方案]经典插件-兼容迁移(Ueditor)</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Libs</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/libs/case/01--an-li--biao-ge-ling-cun-weiexcel.html" class="sidebar-link">[案例]表格另存为Excel</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/libs/case/02--an-li--jin-zhi-fu-zhi-xiao-shuo.html" class="sidebar-link">[案例]禁止复制小说</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/libs/case/03--an-li--jin-zhi-xia-zaipdf.html" class="sidebar-link">[案例]禁止下载PDF</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/libs/01--ti-gang--qian-duan--chang-jian-ye-wu-wen-ti.html" class="sidebar-link">[提纲]前端-常见业务问题</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/libs/02--ti-gang--qian-duan--chang-yong-dai-ma-pian-duan.html" aria-current="page" class="active sidebar-link">[提纲]前端-常用代码片段</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Mvc</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Case</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/case/01--ji-chu-angularjs-old.html" class="sidebar-link">[基础]Angularjs</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/02--ti-gang--jing-dianmvc-backbone.html" class="sidebar-link">[提纲]经典MVC(Backbone)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/03--ti-gang--xian-daimvc-react-like.html" class="sidebar-link">[提纲]现代MVC(react-like)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/05--fang-an--neng-jian-rongie8-demvc-anujs.html" class="sidebar-link">[方案]能兼容IE8+的MVC(anujs)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/06-angular--quan-zhan-xing.html" class="sidebar-link">Angular(全栈型)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/07-omi--kua-kuang-jia.html" class="sidebar-link">omi(跨框架)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/08-svelte--yuan-sheng-ji-xian.html" class="sidebar-link">svelte(原生极限)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/09-stencil--xiao-shui.html" class="sidebar-link">stencil(胶水)</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>React Vue</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/01--si-kao--qian-duan--san-da-sheng-tai-bi-jiao.html" class="sidebar-link">[思考]前端-三大生态比较</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/02--ji-chu-react.html" class="sidebar-link">[基础]React</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/03--ji-chu-vue.html" class="sidebar-link">[基础]Vue</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/04--ji-chu-react16-hooks.html" class="sidebar-link">[基础]React16+Hooks</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/05--ji-chu-vue3-composition.html" class="sidebar-link">[基础]Vue3+Composition</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/07--ti-gang-react-quan-jia-tong-router-flux-styling.html" class="sidebar-link">[提纲]React全家桶(Router+Flux+Styling)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/09--biao-zhun-react--bian-cheng-gui-fan-yu-zui-jia-shi-jian.html" class="sidebar-link">[标准]React-编程规范与最佳实践</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/10--biao-zhun-vue--bian-cheng-gui-fan-yu-zui-jia-shi-jian.html" class="sidebar-link">[标准]Vue-编程规范与最佳实践</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/11--biao-zhun-react-hooks-zui-jia-shi-jian.html" class="sidebar-link">[标准]React Hooks 最佳实践</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/12-note-react-hooks-yuimmutable--shu-ju-liu-shi-zhan.html" class="sidebar-link">[Note]React Hooks 与 Immutable 数据流实战</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/react-vue/13-note--shen-ru-qian-chureact-heredux-201704.html" class="sidebar-link">[Note]深入浅出React和Redux</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Spa</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>Cmpt</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/cmpt/01--ji-chu-handlebars.html" class="sidebar-link">[基础]Handlebars</a></li></ul></section></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/01--ji-chu-javascript--ying-yong-she-ji.html" class="sidebar-link">[基础]JavaScript-应用程序设计</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/02--ji-chu--dan-ye-ying-yong-spa.html" class="sidebar-link">[基础]单页面应用(SPA)</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/03--mo-kuai-hua-requirejs.html" class="sidebar-link">模块化</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/04--shi-tu-yin-qing-jsx-htm.html" class="sidebar-link">视图引擎</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/05--qian-duan-lu-you-router.html" class="sidebar-link">前端路由</a></li><li><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/spa/06--shu-ju-liu-yu-zhuang-tai-ji-redux.html" class="sidebar-link">数据流与状态机</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="提纲-前端-常用代码片段"><a href="#提纲-前端-常用代码片段" class="header-anchor">#</a> [提纲]前端-常用代码片段</h1> <blockquote><p>@TODO @messy 未测试, 待整理</p></blockquote> <ul><li>项目常用JS方法封装(复制粘贴不香吗？)
<ul><li><a href="https://juejin.im/post/5deb2cdf518825122671b637" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5deb2cdf518825122671b637<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>记好这 24 个 ES6 方法，用来解决实际开发的 JS 问题
<ul><li><a href="https://juejin.im/post/5e5ef2f9f265da57685dc9c1" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5e5ef2f9f265da57685dc9c1<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>书到用时方恨少，一大波JS开发工具函数来了 @nice
<ul><li>笔记主要参考这个</li> <li>@by <a href="https://juejin.im/user/59c7ae3d518825788565af37/posts" target="_blank" rel="noopener noreferrer">https://juejin.im/user/59c7ae3d518825788565af37/posts<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://juejin.im/entry/5e6d7cc8e51d4526f45a8b06" target="_blank" rel="noopener noreferrer">https://juejin.im/entry/5e6d7cc8e51d4526f45a8b06<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>formstone
<ul><li><a href="https://formstone.it/components/core/" target="_blank" rel="noopener noreferrer">https://formstone.it/components/core/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>pianduan @empty
<ul><li>万物皆片段</li> <li><a href="https://www.pianduan.fun/?language_id=3&amp;page=1" target="_blank" rel="noopener noreferrer">https://www.pianduan.fun/?language_id=3&amp;page=1<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <h1 id="常用片段"><a href="#常用片段" class="header-anchor">#</a> 常用片段</h1> <ul><li>48 个 JavaScript 代码片段
<ul><li><a href="http://codebay.cn/post/7452.html" target="_blank" rel="noopener noreferrer">http://codebay.cn/post/7452.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>常用片段
<ul><li><a href="http://www.css88.com/archives/5180" target="_blank" rel="noopener noreferrer">http://www.css88.com/archives/5180<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>jsfont-常用代码收集 @nice
<ul><li><a href="https://github.com/jsfront/src/blob/master/js.md" target="_blank" rel="noopener noreferrer">https://github.com/jsfront/src/blob/master/js.md<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>ES6常用片段
<ul><li><a href="http://www.css88.com/archives/8748" target="_blank" rel="noopener noreferrer">http://www.css88.com/archives/8748<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>overwrite some javascript methods
<ul><li><a href="https://github.com/xuqiang521/overwrite" target="_blank" rel="noopener noreferrer">https://github.com/xuqiang521/overwrite<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li>JS开发中的一些小技巧和方法 @simple
<ul><li><a href="https://mrsunny123.github.io/2016/09/19/JS-Tips/" target="_blank" rel="noopener noreferrer">https://mrsunny123.github.io/2016/09/19/JS-Tips/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// json转url参数</span>
<span class="token keyword">function</span> <span class="token function">json2url</span><span class="token punctuation">(</span><span class="token parameter">json</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> arr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> name <span class="token keyword">in</span> json<span class="token punctuation">)</span><span class="token punctuation">{</span>
        arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>name<span class="token operator">+</span><span class="token string">'='</span><span class="token operator">+</span>json<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'&amp;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 验证是否为数组</span>
Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'[object Array]'</span>
</code></pre></div><hr> <h1 id="格式化"><a href="#格式化" class="header-anchor">#</a> 格式化</h1> <ul><li>B转换到KB,MB,GB并保留两位小数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">formatFileSize</span><span class="token punctuation">(</span><span class="token parameter">fileSize</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> temp<span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>fileSize <span class="token operator">&lt;</span> <span class="token number">1024</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> fileSize <span class="token operator">+</span> <span class="token string">'B'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>fileSize <span class="token operator">&lt;</span> <span class="token punctuation">(</span><span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        temp <span class="token operator">=</span> fileSize <span class="token operator">/</span> <span class="token number">1024</span><span class="token punctuation">;</span>
        temp <span class="token operator">=</span> temp<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> temp <span class="token operator">+</span> <span class="token string">'KB'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>fileSize <span class="token operator">&lt;</span> <span class="token punctuation">(</span><span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        temp <span class="token operator">=</span> fileSize <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        temp <span class="token operator">=</span> temp<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> temp <span class="token operator">+</span> <span class="token string">'MB'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        temp <span class="token operator">=</span> fileSize <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        temp <span class="token operator">=</span> temp<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> temp <span class="token operator">+</span> <span class="token string">'GB'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>数字超过规定大小加上加号“+”，如数字超过99显示99+</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">outOfNum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> maxNum</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    val <span class="token operator">=</span> val <span class="token operator">?</span> val<span class="token operator">-</span><span class="token number">0</span> <span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>val <span class="token operator">&gt;</span> maxNum <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>maxNum<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">+</span><span class="token template-punctuation string">`</span></span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> val<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="金钱货币"><a href="#金钱货币" class="header-anchor">#</a> 金钱货币</h1> <ul><li>格式化</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 金钱格式化，三位加逗号</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">formatMoney</span> <span class="token operator">=</span> <span class="token parameter">num</span> <span class="token operator">=&gt;</span> num<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/\B(?=(\d{3})+(?!\d))/g</span><span class="token punctuation">,</span> <span class="token string">&quot;,&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>银行卡号空格
<ul><li><a href="http://www.jq22.com/webqd1489" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1489<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#kahao'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'keyup'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">//只对输入数字时进行处理</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>which <span class="token operator">&gt;=</span> <span class="token number">48</span> <span class="token operator">&amp;&amp;</span> e<span class="token punctuation">.</span>which <span class="token operator">&lt;=</span> <span class="token number">57</span><span class="token punctuation">)</span> <span class="token operator">||</span>
            <span class="token punctuation">(</span>e<span class="token punctuation">.</span>which <span class="token operator">&gt;=</span> <span class="token number">96</span> <span class="token operator">&amp;&amp;</span> e<span class="token punctuation">.</span>which <span class="token operator">&lt;=</span> <span class="token number">105</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">//获取当前光标的位置</span>
            <span class="token keyword">var</span> caret <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectionStart
            <span class="token comment">//获取当前的value</span>
            <span class="token keyword">var</span> value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value
            <span class="token comment">//从左边沿到坐标之间的空格数</span>
            <span class="token keyword">var</span> sp <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> caret<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/\s/g</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length
            <span class="token comment">//去掉所有空格</span>
            <span class="token keyword">var</span> nospace <span class="token operator">=</span> value<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/\s/g</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span>
            <span class="token comment">//重新插入空格</span>
            <span class="token keyword">var</span> curVal <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token operator">=</span> nospace<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/(\d{4})/g</span><span class="token punctuation">,</span> <span class="token string">&quot;$1 &quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token comment">//从左边沿到原坐标之间的空格数</span>
            <span class="token keyword">var</span> curSp <span class="token operator">=</span> <span class="token punctuation">(</span>curVal<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> caret<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/\s/g</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length
            <span class="token comment">//修正光标位置</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>selectionEnd <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectionStart <span class="token operator">=</span> caret <span class="token operator">+</span> curSp <span class="token operator">-</span> sp

        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h1 id="追加script"><a href="#追加script" class="header-anchor">#</a> 追加script</h1> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> script <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;script&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    script<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">&quot;text/javacript&quot;</span><span class="token punctuation">;</span>
    script<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">&quot;https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js&quot;</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>script<span class="token punctuation">)</span>

<span class="token comment">// @demo 随意拿文字...</span>
<span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">&quot;&quot;</span> 
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.text-wrap .content'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">index<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> str <span class="token operator">+=</span> <span class="token string">&quot;# &quot;</span> <span class="token operator">+</span> <span class="token function">$</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;\n\n&quot;</span>  <span class="token punctuation">)</span>
</code></pre></div><hr> <h1 id="localstorage"><a href="#localstorage" class="header-anchor">#</a> LocalStorage</h1> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">localStorageSet</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">key<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> value <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> value<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">localStorageGet</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">localStorageRemove</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    localStorage<span class="token punctuation">.</span><span class="token function">removeItem</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 存贮某一段时间失效</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">localStorageSetExpire</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">key<span class="token punctuation">,</span> value<span class="token punctuation">,</span> expire</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> value <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        localStorage<span class="token punctuation">.</span><span class="token function">removeItem</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> expire<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="cookie"><a href="#cookie" class="header-anchor">#</a> Cookie</h1> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">cookieSet</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">key<span class="token punctuation">,</span> value<span class="token punctuation">,</span> expire</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    d<span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> expire<span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span>cookie <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;expires=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>d<span class="token punctuation">.</span><span class="token function">toUTCString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">cookieGet</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> cookieStr <span class="token operator">=</span> <span class="token function">unescape</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>cookie<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> arr <span class="token operator">=</span> cookieStr<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'; '</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> cookieValue <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> temp <span class="token operator">=</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'='</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>temp<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">===</span> key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            cookieValue <span class="token operator">=</span> temp<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token keyword">break</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> cookieValue
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">cookieRemove</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    document<span class="token punctuation">.</span>cookie <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">=;expires=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="url-路径参数"><a href="#url-路径参数" class="header-anchor">#</a> URL 路径参数</h1> <ul><li><a href="http://www.jq22.com/webqd443" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd443<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getUrlParam</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> origin <span class="token operator">=</span> <span class="token keyword">null</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">&quot;(^|&amp;)&quot;</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">&quot;=([^&amp;]*)(&amp;|$)&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> r <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>origin <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        r <span class="token operator">=</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>search<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        r <span class="token operator">=</span> origin<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>r <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">decodeURIComponent</span><span class="token punctuation">(</span>r<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">replaceUrlParam</span><span class="token punctuation">(</span><span class="token parameter">paramName<span class="token punctuation">,</span>replaceWith</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> oUrl <span class="token operator">=</span> location<span class="token punctuation">.</span>href<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> re<span class="token operator">=</span><span class="token function">eval</span><span class="token punctuation">(</span><span class="token string">'/('</span><span class="token operator">+</span> paramName<span class="token operator">+</span><span class="token string">'=)([^&amp;]*)/gi'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    location<span class="token punctuation">.</span>href <span class="token operator">=</span> oUrl<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>re<span class="token punctuation">,</span>paramName<span class="token operator">+</span><span class="token string">'='</span><span class="token operator">+</span>replaceWith<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> location<span class="token punctuation">.</span>href<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">delUrlParam</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> loca <span class="token operator">=</span>location<span class="token punctuation">;</span>
    <span class="token keyword">var</span> baseUrl <span class="token operator">=</span> loca<span class="token punctuation">.</span>origin <span class="token operator">+</span> loca<span class="token punctuation">.</span>pathname <span class="token operator">+</span> <span class="token string">&quot;?&quot;</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> query <span class="token operator">=</span> loca<span class="token punctuation">.</span>search<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>query<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token operator">&gt;</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> arr <span class="token operator">=</span> query<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;&amp;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;=&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            obj<span class="token punctuation">[</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">delete</span> obj<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> url <span class="token operator">=</span> baseUrl <span class="token operator">+</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/[\&quot;\{\}]/g</span><span class="token punctuation">,</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/\:/g</span><span class="token punctuation">,</span><span class="token string">&quot;=&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/\,/g</span><span class="token punctuation">,</span><span class="token string">&quot;&amp;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> url
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getUrlParams</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> origin <span class="token operator">=</span> <span class="token keyword">null</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> url <span class="token operator">=</span> location<span class="token punctuation">.</span>href<span class="token punctuation">;</span>
    <span class="token keyword">let</span> temp1 <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'?'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> pram <span class="token operator">=</span> temp1<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> keyValue <span class="token operator">=</span> pram<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'&amp;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> keyValue<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> item <span class="token operator">=</span> keyValue<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'='</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> key <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> value <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> obj<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="文件操作"><a href="#文件操作" class="header-anchor">#</a> 文件操作</h1> <ul><li>获取文件base64编码</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
 * @param file
 * @param format  指定文件格式
 * @param size  指定文件大小(字节)
 * @param formatMsg 格式错误提示
 * @param sizeMsg   大小超出限制提示
 * @returns {Promise&lt;any&gt;}
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">fileToBase64String</span><span class="token punctuation">(</span>file<span class="token punctuation">,</span> format <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'jpg'</span><span class="token punctuation">,</span> <span class="token string">'jpeg'</span><span class="token punctuation">,</span> <span class="token string">'png'</span><span class="token punctuation">,</span> <span class="token string">'gif'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> size <span class="token operator">=</span> <span class="token number">20</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> formatMsg <span class="token operator">=</span> <span class="token string">'文件格式不正确'</span><span class="token punctuation">,</span> sizeMsg <span class="token operator">=</span> <span class="token string">'文件大小超出限制'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 格式过滤</span>
        <span class="token keyword">let</span> suffix <span class="token operator">=</span> file<span class="token punctuation">.</span>type<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> inFormat <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> format<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>suffix <span class="token operator">===</span> format<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                inFormat <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
                <span class="token keyword">break</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>inFormat<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">reject</span><span class="token punctuation">(</span>formatMsg<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment">// 大小过滤</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>file<span class="token punctuation">.</span>size <span class="token operator">&gt;</span> size<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">reject</span><span class="token punctuation">(</span>sizeMsg<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment">// 转base64字符串</span>
        <span class="token keyword">let</span> fileReader <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FileReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        fileReader<span class="token punctuation">.</span><span class="token function">readAsDataURL</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">;</span>
        fileReader<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">let</span> res <span class="token operator">=</span> fileReader<span class="token punctuation">.</span>result<span class="token punctuation">;</span>
            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>base64String<span class="token operator">:</span> res<span class="token punctuation">,</span> suffix<span class="token operator">:</span> suffix<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'异常文件，请重新选择'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>base64转file</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">base64ToFile</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">base64<span class="token punctuation">,</span> filename</span> <span class="token punctuation">)</span><span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> arr <span class="token operator">=</span> base64<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> mime <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/:(.*?);/</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> suffix <span class="token operator">=</span> mime<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token punctuation">;</span><span class="token comment">// 图片后缀</span>
    <span class="token keyword">let</span> bstr <span class="token operator">=</span> <span class="token function">atob</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> n <span class="token operator">=</span> bstr<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
    <span class="token keyword">let</span> u8arr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Uint8Array</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span>n<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        u8arr<span class="token punctuation">[</span>n<span class="token punctuation">]</span> <span class="token operator">=</span> bstr<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">File</span><span class="token punctuation">(</span><span class="token punctuation">[</span>u8arr<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>filename<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>suffix<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> mime <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>base64转blob</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
 *  @param { base64 } base64
 */</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">base64ToBlob</span> <span class="token operator">=</span> <span class="token parameter">base64</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> arr <span class="token operator">=</span> base64<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        mime <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/:(.*?);/</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        bstr <span class="token operator">=</span> <span class="token function">atob</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        n <span class="token operator">=</span> bstr<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
        u8arr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Uint8Array</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span>n<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        u8arr<span class="token punctuation">[</span>n<span class="token punctuation">]</span> <span class="token operator">=</span> bstr<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span>u8arr<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> mime <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>blob转file</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
 *  @param { blob } blob
 *  @param { string } fileName
 */</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">blobToFile</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">blob<span class="token punctuation">,</span> fileName</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    blob<span class="token punctuation">.</span>lastModifiedDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    blob<span class="token punctuation">.</span>name <span class="token operator">=</span> fileName<span class="token punctuation">;</span>
    <span class="token keyword">return</span> blob<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>file转base64</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
 * @param { * } file 图片文件
 */</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">fileToBase64</span> <span class="token operator">=</span> <span class="token parameter">file</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> reader <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FileReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    reader<span class="token punctuation">.</span><span class="token function">readAsDataURL</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">;</span>
    reader<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>result
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="树状图"><a href="#树状图" class="header-anchor">#</a> 树状图</h1> <ul><li>递归生成树形结构</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getTreeData</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> pid<span class="token punctuation">,</span> pidName <span class="token operator">=</span> <span class="token string">'parentId'</span><span class="token punctuation">,</span> idName <span class="token operator">=</span> <span class="token string">'id'</span><span class="token punctuation">,</span> childrenName <span class="token operator">=</span> <span class="token string">'children'</span><span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>pidName<span class="token punctuation">]</span> <span class="token operator">==</span> pid<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>key <span class="token operator">=</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>idName<span class="token punctuation">]</span><span class="token punctuation">;</span>
            data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>childrenName<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">getTreeData</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>idName<span class="token punctuation">]</span><span class="token punctuation">,</span> pidName<span class="token punctuation">,</span> idName<span class="token punctuation">,</span> childrenName<span class="token punctuation">)</span><span class="token punctuation">;</span>
            arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">return</span> arr<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>遍历树节点</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">foreachTree</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> childrenName <span class="token operator">=</span> <span class="token string">'children'</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">callback</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>childrenName<span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>childrenName<span class="token punctuation">]</span><span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">foreachTree</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span>childrenName<span class="token punctuation">]</span><span class="token punctuation">,</span> childrenName<span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>追溯父节点</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">traceParentNode</span><span class="token punctuation">(</span>pid<span class="token punctuation">,</span> data<span class="token punctuation">,</span> rootPid<span class="token punctuation">,</span> pidName <span class="token operator">=</span> <span class="token string">'parentId'</span><span class="token punctuation">,</span> idName <span class="token operator">=</span> <span class="token string">'id'</span><span class="token punctuation">,</span> childrenName <span class="token operator">=</span> <span class="token string">'children'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token function">foreachTree</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> childrenName<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">[</span>idName<span class="token punctuation">]</span> <span class="token operator">==</span> pid<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">[</span>pidName<span class="token punctuation">]</span> <span class="token operator">!=</span> rootPid<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                arr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token function">traceParentNode</span><span class="token punctuation">(</span>node<span class="token punctuation">[</span>pidName<span class="token punctuation">]</span><span class="token punctuation">,</span> data<span class="token punctuation">,</span> rootPid<span class="token punctuation">,</span> pidName<span class="token punctuation">,</span> idName<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> arr<span class="token punctuation">;</span> 
<span class="token punctuation">}</span>
</code></pre></div><ul><li>寻找所有子节点</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">traceChildNode</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> data<span class="token punctuation">,</span> pidName <span class="token operator">=</span> <span class="token string">'parentId'</span><span class="token punctuation">,</span> idName <span class="token operator">=</span> <span class="token string">'id'</span><span class="token punctuation">,</span> childrenName <span class="token operator">=</span> <span class="token string">'children'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token function">foreachTree</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> childrenName<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">[</span>pidName<span class="token punctuation">]</span> <span class="token operator">==</span> id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
            arr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token function">traceChildNode</span><span class="token punctuation">(</span>node<span class="token punctuation">[</span>idName<span class="token punctuation">]</span><span class="token punctuation">,</span> data<span class="token punctuation">,</span> pidName<span class="token punctuation">,</span> idName<span class="token punctuation">,</span> childrenName<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> arr<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>根据pid生成树形结构</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> createTree <span class="token operator">=</span> <span class="token punctuation">(</span>items<span class="token punctuation">,</span> id <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">,</span> link <span class="token operator">=</span> <span class="token string">'pid'</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    items<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">[</span>link<span class="token punctuation">]</span> <span class="token operator">===</span> id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>item<span class="token punctuation">,</span> children<span class="token operator">:</span> <span class="token function">createTree</span><span class="token punctuation">(</span>items<span class="token punctuation">,</span> item<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="复制粘贴"><a href="#复制粘贴" class="header-anchor">#</a> 复制粘贴</h1> <ul><li><p>复制文字追加网站来源</p> <ul><li><a href="http://www.jq22.com/webqd581" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd581<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//复制内容自动添加版权信息</span>
<span class="token keyword">var</span> Sys <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ua <span class="token operator">=</span> navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span> window<span class="token punctuation">.</span>ActiveXObject <span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function-variable function">oncopy</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        event<span class="token punctuation">.</span>returnValue <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> t<span class="token operator">=</span>document<span class="token punctuation">.</span>selection<span class="token punctuation">.</span><span class="token function">createRange</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>text<span class="token punctuation">;</span>
        <span class="token keyword">var</span> s<span class="token operator">=</span><span class="token string">&quot;\r\n原文出自[jQuery插件库] 转载请保留原文链接:&quot;</span><span class="token operator">+</span>location<span class="token punctuation">.</span>href<span class="token punctuation">;</span>
        clipboardData<span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token string">'Text'</span><span class="token punctuation">,</span>t<span class="token operator">+</span><span class="token string">'\r\n'</span><span class="token operator">+</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">else</span>
<span class="token punctuation">{</span>
    <span class="token keyword">function</span> <span class="token function">addLink</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">var</span> body_element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> selection<span class="token punctuation">;</span>
        selection <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> pagelink <span class="token operator">=</span> <span class="token string">&quot; 原文出自[jQuery插件库] 转载请保留原文链接:&quot;</span><span class="token operator">+</span>document<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href<span class="token punctuation">;</span>

        <span class="token keyword">var</span> copytext <span class="token operator">=</span> selection <span class="token operator">+</span> pagelink<span class="token punctuation">;</span>
        <span class="token keyword">var</span> newdiv <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        newdiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>position<span class="token operator">=</span><span class="token string">'absolute'</span><span class="token punctuation">;</span>
        newdiv<span class="token punctuation">.</span>style<span class="token punctuation">.</span>left<span class="token operator">=</span><span class="token string">'-99999px'</span><span class="token punctuation">;</span>
        body_element<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>newdiv<span class="token punctuation">)</span><span class="token punctuation">;</span>
        newdiv<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> copytext<span class="token punctuation">;</span>
        selection<span class="token punctuation">.</span><span class="token function">selectAllChildren</span><span class="token punctuation">(</span>newdiv<span class="token punctuation">)</span><span class="token punctuation">;</span>
        window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          body_element<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>newdiv<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    document<span class="token punctuation">.</span>oncopy <span class="token operator">=</span> addLink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="时间"><a href="#时间" class="header-anchor">#</a> 时间</h1> <ul><li>时间比较</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> beginDay <span class="token operator">=</span> data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string">&quot;2017-12-25&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 活动开始日期</span>
    endDay <span class="token operator">=</span> data<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string">&quot;2018-01-02&quot;</span><span class="token punctuation">,</span>   <span class="token comment">// 活动结束日期</span>
    currentDay <span class="token operator">=</span> data<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// 当前日期</span>

<span class="token keyword">var</span> date1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>beginDay<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> date2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>endDay<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> currentDate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>currentDay<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> parse1 <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>date1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> parse2 <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>date2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> parseCurrent <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>currentDate<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> flag1 <span class="token operator">=</span> <span class="token punctuation">(</span>parseCurrent <span class="token operator">-</span> parse1<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">1000</span> <span class="token operator">/</span> <span class="token number">60</span> <span class="token operator">/</span> <span class="token number">60</span> <span class="token operator">/</span> <span class="token number">24</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> flag2 <span class="token operator">=</span> <span class="token punctuation">(</span>parse2 <span class="token operator">-</span> parseCurrent<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">1000</span> <span class="token operator">/</span> <span class="token number">60</span> <span class="token operator">/</span> <span class="token number">60</span> <span class="token operator">/</span> <span class="token number">24</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>flag1 <span class="token operator">&gt;=</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> flag2 <span class="token operator">&gt;=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.welfare-tip'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.common-tip'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="事件"><a href="#事件" class="header-anchor">#</a> 事件</h1> <ul><li>阻止取消事件
<ul><li>return false</li> <li><a href="http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false" target="_blank" rel="noopener noreferrer">http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://www.75team.com/archives/201" target="_blank" rel="noopener noreferrer">http://www.75team.com/archives/201<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// event.preventDefault()会阻挡预设要发生的事件.</span>
<span class="token comment">// event.stopPropagation()会阻挡发生冒泡事件.</span>
<span class="token comment">// 而return false则是前面两者的事情他都会做：</span>
<span class="token comment">// 他会做event.preventDefault();</span>
<span class="token comment">// 他会做event.stopPropagation();</span>
<span class="token comment">// 停止callback function的执行并且立即return回来</span>
</code></pre></div><ul><li>表单输入实时监听</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;input&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;input propertychange&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">check</span><span class="token punctuation">(</span><span class="token string">&quot;user&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;pass&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;btn&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;orange&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li><p>输入框输入字数限制</p> <ul><li><a href="http://www.jq22.com/webqd2084" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2084<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p><code>文本框自动跳转下一个</code></p> <ul><li><a href="http://www.jq22.com/webqd2809" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2809<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://www.jq22.com/webqd2468" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2468<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> inputLength <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>
    <span class="token comment">//$('input').keyup(function(){})</span>
    <span class="token comment">//使用jQuery事件代理的事件绑定方式，不需要对每个input进行事件绑定，有利于性能优化</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#body'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">delegate</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token string">'keyup'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> _this <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            valLength <span class="token operator">=</span> _this<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">,</span>
            index <span class="token operator">=</span> _this<span class="token punctuation">.</span><span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>valLength <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> inputLength<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">//输入完成时进行操作</span>
            _this<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-in'</span><span class="token punctuation">,</span> <span class="token string">'true'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>valLength <span class="token operator">==</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> _this<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-in'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'true'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">//删除所有时进行操作</span>
            _this<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-in'</span><span class="token punctuation">,</span> <span class="token string">'false'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prev</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="邮箱"><a href="#邮箱" class="header-anchor">#</a> 邮箱</h1> <ul><li>邮箱自动加上@后面内容
<ul><li><a href="http://www.jq22.com/webqd2374" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2374<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> lists<span class="token punctuation">;</span>
<span class="token keyword">var</span> len<span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> objtxt <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;regemail&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> objlist <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;maillist&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    lists <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">&quot;li&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    len <span class="token operator">=</span> lists<span class="token punctuation">.</span>length<span class="token punctuation">;</span>

    <span class="token comment">//给每一个li绑定一个鼠标点击事件</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        lists<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onmousedown</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            objtxt<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>textContent<span class="token punctuation">;</span>
            objlist<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token comment">//计算这个下拉框的显示位置</span>
    <span class="token comment">//焦点选中时</span>
    objtxt<span class="token punctuation">.</span><span class="token function-variable function">onfocus</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        objlist<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;block&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">//焦点移开时</span>
    objtxt<span class="token punctuation">.</span><span class="token function-variable function">onblur</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// objlist.style.display=&quot;none&quot;;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">//输入过程中时</span>
    objtxt<span class="token punctuation">.</span><span class="token function-variable function">onkeyup</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">//获取文本中的值</span>
        <span class="token keyword">var</span> txt <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>
        <span class="token keyword">var</span> flag <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>txt<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;@&quot;</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            flag <span class="token operator">=</span> txt<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span>txt<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;@&quot;</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//获取输入的@开始的内容</span>
            txt <span class="token operator">=</span> txt<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> txt<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;@&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            flag <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">var</span> val <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
        <span class="token comment">//将这个值放到所有的li前面</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            val <span class="token operator">=</span> lists<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>textContent<span class="token punctuation">;</span>
            val <span class="token operator">=</span> val<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span>val<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;@&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            lists<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> txt <span class="token operator">+</span> val<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token comment">//如果用户输入了@，则检查哪些是否满足条件的</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>flag <span class="token operator">!=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span>flag<span class="token punctuation">,</span> <span class="token string">&quot;i&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>lists<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>textContent<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    lists<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;block&quot;</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                    lists<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="窗口"><a href="#窗口" class="header-anchor">#</a> 窗口</h1> <ul><li><p>点击空白处关闭弹窗</p> <ul><li>document加阻止冒泡 两个点击事件</li> <li><a href="http://www.jq22.com/webqd2693" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2693<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">click</span><span class="token punctuation">(</span><span class="token string">&quot;box&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;box&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">click</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>box</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> _conss <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token operator">+</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//点击的容器范围</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>_conss<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> _conss<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;.&quot;</span><span class="token operator">+</span>box<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//选择要关闭的容器</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>防止被Iframe嵌套</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span><span class="token punctuation">(</span>top <span class="token operator">!=</span> self<span class="token punctuation">)</span><span class="token punctuation">{</span>
    location<span class="token punctuation">.</span>href <span class="token operator">=</span> ”about<span class="token operator">:</span>blank”<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><code>全屏</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">launchFullscreen</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>requestFullscreen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        element<span class="token punctuation">.</span><span class="token function">requestFullscreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>mozRequestFullScreen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        element<span class="token punctuation">.</span><span class="token function">mozRequestFullScreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>msRequestFullscreen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        element<span class="token punctuation">.</span><span class="token function">msRequestFullscreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span>webkitRequestFullscreen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        element<span class="token punctuation">.</span><span class="token function">webkitRequestFullScreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">exitFullscreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>exitFullscreen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        document<span class="token punctuation">.</span><span class="token function">exitFullscreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>msExitFullscreen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        document<span class="token punctuation">.</span><span class="token function">msExitFullscreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>mozCancelFullScreen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        document<span class="token punctuation">.</span><span class="token function">mozCancelFullScreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>webkitExitFullscreen<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        document<span class="token punctuation">.</span><span class="token function">webkitExitFullscreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>打开一个窗口</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">openWindow</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> windowName<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>screen<span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">2.0</span><span class="token punctuation">)</span> <span class="token operator">-</span> width <span class="token operator">/</span> <span class="token number">2.0</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>screen<span class="token punctuation">.</span>height <span class="token operator">/</span> <span class="token number">2.0</span><span class="token punctuation">)</span> <span class="token operator">-</span> height <span class="token operator">/</span> <span class="token number">2.0</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> isMSIE <span class="token operator">=</span> navigator<span class="token punctuation">.</span>appName <span class="token operator">==</span> <span class="token string">&quot;Microsoft Internet Explorer&quot;</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>isMSIE<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> p <span class="token operator">=</span> <span class="token string">&quot;resizable=1,location=no,scrollbars=no,width=&quot;</span><span class="token punctuation">;</span>
        p <span class="token operator">=</span> p <span class="token operator">+</span> width<span class="token punctuation">;</span>
        p <span class="token operator">=</span> p <span class="token operator">+</span> <span class="token string">&quot;,height=&quot;</span><span class="token punctuation">;</span>
        p <span class="token operator">=</span> p <span class="token operator">+</span> height<span class="token punctuation">;</span>
        p <span class="token operator">=</span> p <span class="token operator">+</span> <span class="token string">&quot;,left=&quot;</span><span class="token punctuation">;</span>
        p <span class="token operator">=</span> p <span class="token operator">+</span> x<span class="token punctuation">;</span>
        p <span class="token operator">=</span> p <span class="token operator">+</span> <span class="token string">&quot;,top=&quot;</span><span class="token punctuation">;</span>
        p <span class="token operator">=</span> p <span class="token operator">+</span> y<span class="token punctuation">;</span>
        window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> windowName<span class="token punctuation">,</span> p<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> win <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>
            url<span class="token punctuation">,</span>
            <span class="token string">&quot;ZyiisPopup&quot;</span><span class="token punctuation">,</span>
            <span class="token string">&quot;top=&quot;</span> <span class="token operator">+</span>
            y <span class="token operator">+</span>
            <span class="token string">&quot;,left=&quot;</span> <span class="token operator">+</span>
            x <span class="token operator">+</span>
            <span class="token string">&quot;,scrollbars=&quot;</span> <span class="token operator">+</span>
            scrollbars <span class="token operator">+</span>
            <span class="token string">&quot;,dialog=yes,modal=yes,width=&quot;</span> <span class="token operator">+</span>
            width <span class="token operator">+</span>
            <span class="token string">&quot;,height=&quot;</span> <span class="token operator">+</span>
            height <span class="token operator">+</span>
            <span class="token string">&quot;,resizable=no&quot;</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">eval</span><span class="token punctuation">(</span><span class="token string">&quot;try { win.resizeTo(width, height); } catch(e) { }&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        win<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="窗口信息"><a href="#窗口信息" class="header-anchor">#</a> 窗口信息</h1> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 获取窗口可视范围的高度</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getClientHeight</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> clientHeight <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientHeight <span class="token operator">&amp;&amp;</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        clientHeight <span class="token operator">=</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientHeight <span class="token operator">&lt;</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">)</span> <span class="token operator">?</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientHeight <span class="token operator">:</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">else</span> <span class="token punctuation">{</span>
        clientHeight <span class="token operator">=</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientHeight <span class="token operator">&gt;</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">)</span> <span class="token operator">?</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientHeight <span class="token operator">:</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> clientHeight<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 获取窗口可视范围的高度</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getPageViewWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> d <span class="token operator">=</span> document<span class="token punctuation">,</span>
        a <span class="token operator">=</span> d<span class="token punctuation">.</span>compatMode <span class="token operator">==</span> <span class="token string">&quot;BackCompat&quot;</span> <span class="token operator">?</span> d<span class="token punctuation">.</span>body <span class="token operator">:</span> d<span class="token punctuation">.</span>documentElement<span class="token punctuation">;</span>
    <span class="token keyword">return</span> a<span class="token punctuation">.</span>clientWidth<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 获取窗口宽度</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getPageWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> g <span class="token operator">=</span> document<span class="token punctuation">,</span>
        a <span class="token operator">=</span> g<span class="token punctuation">.</span>body<span class="token punctuation">,</span>
        f <span class="token operator">=</span> g<span class="token punctuation">.</span>documentElement<span class="token punctuation">,</span>
        d <span class="token operator">=</span> g<span class="token punctuation">.</span>compatMode <span class="token operator">==</span> <span class="token string">&quot;BackCompat&quot;</span> <span class="token operator">?</span> a <span class="token operator">:</span> g<span class="token punctuation">.</span>documentElement<span class="token punctuation">;</span>
    <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span>f<span class="token punctuation">.</span>scrollWidth<span class="token punctuation">,</span> a<span class="token punctuation">.</span>scrollWidth<span class="token punctuation">,</span> d<span class="token punctuation">.</span>clientWidth<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 获取窗口尺寸</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getViewportOffset</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            w<span class="token operator">:</span> window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">,</span>
            h<span class="token operator">:</span> window<span class="token punctuation">.</span>innerHeight
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token comment">// ie8及其以下</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>compatMode <span class="token operator">===</span> <span class="token string">&quot;BackCompat&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// 怪异模式</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                w<span class="token operator">:</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientWidth<span class="token punctuation">,</span>
                h<span class="token operator">:</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientHeight
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token comment">// 标准模式</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                w<span class="token operator">:</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientWidth<span class="token punctuation">,</span>
                h<span class="token operator">:</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="滚动条"><a href="#滚动条" class="header-anchor">#</a> 滚动条</h1> <ul><li>滚动条信息</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 获取滚动条距顶部高度</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getPageScrollTop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> a <span class="token operator">=</span> document<span class="token punctuation">;</span>
    <span class="token keyword">return</span> a<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">||</span> a<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 获取滚动条距左边的高度</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getPageScrollLeft</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> a <span class="token operator">=</span> document<span class="token punctuation">;</span>
    <span class="token keyword">return</span> a<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollLeft <span class="token operator">||</span> a<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollLeft<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>返回当前滚动条位置</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getScrollPosition</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">el <span class="token operator">=</span> window</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
    x<span class="token operator">:</span> el<span class="token punctuation">.</span>pageXOffset <span class="token operator">!==</span> <span class="token keyword">undefined</span> <span class="token operator">?</span> el<span class="token punctuation">.</span>pageXOffset <span class="token operator">:</span> el<span class="token punctuation">.</span>scrollLeft<span class="token punctuation">,</span>
    y<span class="token operator">:</span> el<span class="token punctuation">.</span>pageYOffset <span class="token operator">!==</span> <span class="token keyword">undefined</span> <span class="token operator">?</span> el<span class="token punctuation">.</span>pageYOffset <span class="token operator">:</span> el<span class="token punctuation">.</span>scrollTop
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>滚动到指定元素区域</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">smoothScroll</span> <span class="token operator">=</span> <span class="token parameter">element</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        behavior<span class="token operator">:</span> <span class="token string">'smooth'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>平滑滚动到页面顶部</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">scrollToTop</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> c <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop <span class="token operator">||</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>c <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        window<span class="token punctuation">.</span><span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>scrollToTop<span class="token punctuation">)</span><span class="token punctuation">;</span>
        window<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> c <span class="token operator">-</span> c <span class="token operator">/</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>检查页面底部是否可见</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">bottomVisible</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight <span class="token operator">+</span> window<span class="token punctuation">.</span>scrollY <span class="token operator">&gt;=</span>
        <span class="token punctuation">(</span>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollHeight <span class="token operator">||</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="下拉加载"><a href="#下拉加载" class="header-anchor">#</a> 下拉加载</h1> <ul><li>下拉加载更多
<ul><li><a href="http://www.jq22.com/webqd2043" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2043<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">scroll</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//当时滚动条离底部60px时开始加载下一页的内容</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">scrollTop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">60</span><span class="token punctuation">)</span> <span class="token operator">&gt;=</span> <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">clearTimeout</span><span class="token punctuation">(</span>timers<span class="token punctuation">)</span><span class="token punctuation">;</span>
        timers <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            page<span class="token operator">++</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;第&quot;</span> <span class="token operator">+</span> page <span class="token operator">+</span> <span class="token string">&quot;页&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">LoadingDataFn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="贴边停靠"><a href="#贴边停靠" class="header-anchor">#</a> 贴边停靠</h1> <ul><li><p><a href="http://www.jq22.com/webqd2141" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2141<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></li> <li><p>仿淘宝页面点击元素收起或展开内容</p> <ul><li><a href="http://www.jq22.com/webqd2760" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd2760<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;cf_allGoods&quot;</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;cf_listATitle&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>i<span class="token operator">&gt;</span><span class="token operator">-</span><span class="token operator">&lt;</span><span class="token operator">/</span>i<span class="token operator">&gt;</span><span class="token operator">&lt;</span>span<span class="token operator">&gt;</span>查看所有商品<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;cf_agClassFi&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>a<span class="token operator">&gt;</span>按销量<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span><span class="token operator">&lt;</span>a<span class="token operator">&gt;</span>按价格<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span><span class="token operator">&lt;</span>a<span class="token operator">&gt;</span>按商品<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span><span class="token operator">&lt;</span>a<span class="token operator">&gt;</span>按收藏<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;.cf_listATitle&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prev</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&quot;i&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prev</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&quot;i&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">&quot;-&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prev</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&quot;i&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">&quot;+&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prev</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">&quot;i&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">&quot;-&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="标签页"><a href="#标签页" class="header-anchor">#</a> 标签页</h1> <ul><li>网页标签页消息提示
<ul><li><a href="http://www.jq22.com/webqd1653" target="_blank" rel="noopener noreferrer">http://www.jq22.com/webqd1653<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    $<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        mengfan<span class="token operator">:</span><span class="token punctuation">{</span>
            <span class="token function-variable function">show</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">var</span> step<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">,</span>title<span class="token operator">=</span>document<span class="token punctuation">.</span>title<span class="token punctuation">;</span>
                <span class="token keyword">var</span> timer<span class="token operator">=</span><span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    step<span class="token operator">++</span><span class="token punctuation">;</span>
                    <span class="token keyword">if</span><span class="token punctuation">(</span>step<span class="token operator">==</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">{</span>step<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
                    <span class="token keyword">if</span><span class="token punctuation">(</span>step<span class="token operator">==</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>document<span class="token punctuation">.</span>title<span class="token operator">=</span>title<span class="token punctuation">}</span><span class="token punctuation">;</span>
                    <span class="token keyword">if</span><span class="token punctuation">(</span>step<span class="token operator">==</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{</span>document<span class="token punctuation">.</span>title<span class="token operator">=</span><span class="token string">'【'</span><span class="token operator">+</span>str<span class="token operator">+</span><span class="token string">'】'</span><span class="token operator">+</span>title<span class="token punctuation">}</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">return</span> <span class="token punctuation">[</span>timer<span class="token punctuation">,</span>title<span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token function-variable function">clear</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">timerarr</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span>timerarr<span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token function">clearInterval</span><span class="token punctuation">(</span>timerarr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                document<span class="token punctuation">.</span>title<span class="token operator">=</span>timerarr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">;</span>

            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>jQuery<span class="token punctuation">)</span>


message<span class="token operator">=</span>$<span class="token punctuation">.</span>mengfan<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token string">'新消息'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        $<span class="token punctuation">.</span>mengfan<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">10000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h1 id="图片懒加载"><a href="#图片懒加载" class="header-anchor">#</a> 图片懒加载</h1> <ul><li>两种图片lazy加载的方式</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// @description 准备为图片预加载使用的插件</span>
<span class="token comment">// 使用的图片容器css类名为lazy-load-wrap</span>
<span class="token comment">// 图片真实地址为data-lazy-src</span>
<span class="token comment">// 当lazy-load-wrap容器进入视口，则开始替换容器内所有需要延迟加载的图片路径，并更改容器的加载状态</span>
<span class="token comment">//第一种方法</span>
$<span class="token punctuation">.</span>fn<span class="token punctuation">.</span><span class="token function-variable function">compassLazyLoad</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> _HEIGHT<span class="token operator">=</span>window<span class="token punctuation">.</span>innerHeight<span class="token punctuation">,</span>
    _lazyLoadWrap<span class="token operator">=</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.lazy-load-wrap'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">var</span> methods<span class="token operator">=</span><span class="token punctuation">{</span>
        <span class="token function-variable function">setOffsetTop</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span>_lazyLoadWrap<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">i<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token function">$</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                    <span class="token string">'top'</span><span class="token operator">:</span>n<span class="token punctuation">.</span>offsetTop<span class="token operator">-</span>_HEIGHT<span class="token punctuation">,</span>
                    <span class="token string">'status'</span><span class="token operator">:</span><span class="token string">'wait'</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">isShow</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">var</span> _scrollTop<span class="token operator">=</span><span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span>
            <span class="token comment">//利用image容器判断是否进入视口，而非image本身</span>
            $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span>_lazyLoadWrap<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">var</span> _that<span class="token operator">=</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>_that<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">)</span><span class="token operator">===</span><span class="token string">'done'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">return</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">;</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>_that<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'top'</span><span class="token punctuation">)</span><span class="token operator">&lt;=</span>_scrollTop<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    _that<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'img[data-lazy-src]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">i<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                        n<span class="token punctuation">.</span>src<span class="token operator">=</span><span class="token function">$</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token string">'lazy-src'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    _that<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span><span class="token string">'done'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">scroll</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                methods<span class="token punctuation">.</span><span class="token function">isShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">init</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            methods<span class="token punctuation">.</span><span class="token function">setOffsetTop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            methods<span class="token punctuation">.</span><span class="token function">isShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            methods<span class="token punctuation">.</span><span class="token function">scroll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    methods<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token punctuation">}</span>


<span class="token comment">//第二种方法</span>

<span class="token keyword">var</span> exist<span class="token operator">=</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">$</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> timer<span class="token operator">=</span><span class="token keyword">null</span><span class="token punctuation">,</span>
    temp<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.container'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    ret<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">,</span>len<span class="token operator">=</span>temp<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator">&lt;=</span>len<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        ret<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token operator">=</span>temp<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">var</span> <span class="token function-variable function">isExist</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">winTop<span class="token punctuation">,</span>winEnd</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token keyword">in</span> ret<span class="token punctuation">)</span><span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ret<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">var</span> item<span class="token operator">=</span>ret<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>
            eleTop<span class="token operator">=</span>item<span class="token punctuation">.</span>offsetTop<span class="token punctuation">,</span>
            eleEnd<span class="token operator">=</span>eleTop<span class="token operator">+</span>item<span class="token punctuation">.</span>offsetHeight<span class="token punctuation">;</span>

            <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token punctuation">(</span>eleTop<span class="token operator">&gt;</span>winTop<span class="token operator">&amp;&amp;</span>eleTop<span class="token operator">&lt;=</span>winEnd<span class="token punctuation">)</span><span class="token operator">||</span><span class="token punctuation">(</span>eleEnd<span class="token operator">&gt;</span>winTop<span class="token operator">&amp;&amp;</span>eleEnd<span class="token operator">&lt;=</span>winEnd<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token function">$</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span><span class="token string">'none'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">new</span> <span class="token class-name">Tab</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>data<span class="token punctuation">)</span><span class="token punctuation">.</span>init<span class="token punctuation">;</span>
                <span class="token keyword">delete</span> ret<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        timer<span class="token operator">:</span>timer<span class="token punctuation">;</span>
        isExist<span class="token operator">:</span>isExist<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>$<span class="token punctuation">)</span><span class="token punctuation">;</span>



<span class="token comment">//第三种方法</span>
<span class="token function">Zepto</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">$</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> swiper <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Swiper</span><span class="token punctuation">(</span><span class="token string">'.swiper-container'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        pagination<span class="token operator">:</span> <span class="token string">'.swiper-pagination'</span><span class="token punctuation">,</span>
        paginationClickable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        autoplay<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
        loop<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        autoplayDisableOnInteraction<span class="token operator">:</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">lazyLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> imgs <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;.lazyLoad&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> src <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
        $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span>imgs<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">index<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            src <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-src'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">$</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">,</span> src<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> lazyLoadTimerId <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token comment">/// 智能加载事件</span>
    <span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token string">&quot;scroll&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">clearTimeout</span><span class="token punctuation">(</span>lazyLoadTimerId<span class="token punctuation">)</span><span class="token punctuation">;</span>
        lazyLoadTimerId <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// 延迟加载所有图片</span>
            <span class="token keyword">var</span> isHttp <span class="token operator">=</span> <span class="token punctuation">(</span>location<span class="token punctuation">.</span>protocol <span class="token operator">===</span> <span class="token string">&quot;http:&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#ym_images img&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">var</span> self <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>self<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token string">&quot;:above-the-fold&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">var</span> originUrl <span class="token operator">=</span> self<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&quot;data-original&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    self<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">&quot;src&quot;</span><span class="token punctuation">,</span> originUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="瀑布流"><a href="#瀑布流" class="header-anchor">#</a> 瀑布流</h1> <ul><li>瀑布流-无限加载实例</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// be dependent on jquery &amp; jquery.infinitescroll.min.js</span>
<span class="token comment">// insert this '&lt;div id=&quot;more&quot;&gt;&lt;a href=&quot;api?page=&quot;&gt;&lt;/a&gt;&lt;/div&gt;' to your page.html</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">$</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">var</span> $container <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.list-wrap-gd'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">function</span> <span class="token function">layOutCallBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          $container<span class="token punctuation">.</span><span class="token function">imagesLoaded</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
              $container<span class="token punctuation">.</span><span class="token function">masonry</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                  itemSelector<span class="token operator">:</span> <span class="token string">'.item-bar'</span><span class="token punctuation">,</span>
                  gutter<span class="token operator">:</span> <span class="token number">10</span>
              <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          $container<span class="token punctuation">.</span><span class="token function">imagesLoaded</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">progress</span><span class="token punctuation">(</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              $container<span class="token punctuation">.</span><span class="token function">masonry</span><span class="token punctuation">(</span><span class="token string">'layout'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token function">layOutCallBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      $container<span class="token punctuation">.</span><span class="token function">infinitescroll</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          navSelector <span class="token operator">:</span> <span class="token string">&quot;#more&quot;</span><span class="token punctuation">,</span>
          nextSelector <span class="token operator">:</span> <span class="token string">&quot;#more a&quot;</span><span class="token punctuation">,</span>
          itemSelector <span class="token operator">:</span> <span class="token string">&quot;.item-bar&quot;</span><span class="token punctuation">,</span>
          pixelsFromNavToBottom<span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
          loading<span class="token operator">:</span><span class="token punctuation">{</span>
              img<span class="token operator">:</span> <span class="token string">&quot;/images/masonry_loading.gif&quot;</span><span class="token punctuation">,</span>
              msgText<span class="token operator">:</span> <span class="token string">' '</span><span class="token punctuation">,</span>
              finishedMsg<span class="token operator">:</span> <span class="token string">&quot;&lt;em&gt;已经到最后一页&lt;/em&gt;&quot;</span><span class="token punctuation">,</span>
              <span class="token function-variable function">finished</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#more&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                  <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#infscr-loading&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
              <span class="token punctuation">}</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token function-variable function">errorCallback</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
              <span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">unbind</span><span class="token punctuation">(</span><span class="token string">'.infscr'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token function-variable function">pathParse</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">path<span class="token punctuation">,</span> nextPage</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              <span class="token keyword">var</span> query <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
              <span class="token keyword">var</span> keyword<span class="token operator">=</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#search_keyword&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
              <span class="token keyword">var</span> cat_id<span class="token operator">=</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#cat_id&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
              <span class="token keyword">var</span> brand_id<span class="token operator">=</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#brand_id&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
              <span class="token keyword">var</span> country_id <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#country_id&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
              query <span class="token operator">=</span> query <span class="token operator">+</span> <span class="token string">&quot;&amp;namekeyword=&quot;</span><span class="token operator">+</span>keyword<span class="token punctuation">;</span>
              query <span class="token operator">=</span> query <span class="token operator">+</span><span class="token string">&quot;&amp;cat_id=&quot;</span><span class="token operator">+</span>cat_id
              query <span class="token operator">=</span> query <span class="token operator">+</span> <span class="token string">&quot;&amp;brand_id=&quot;</span> <span class="token operator">+</span> brand_id<span class="token punctuation">;</span>
              query <span class="token operator">=</span> query <span class="token operator">+</span> <span class="token string">&quot;&amp;country_id=&quot;</span> <span class="token operator">+</span> country_id<span class="token punctuation">;</span>
              path <span class="token operator">=</span> <span class="token punctuation">[</span>path<span class="token punctuation">,</span>query<span class="token punctuation">]</span><span class="token punctuation">;</span>
              <span class="token keyword">return</span> path<span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>

      <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">newElements</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">var</span> $newElems <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span> newElements <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span> opacity<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          $newElems<span class="token punctuation">.</span><span class="token function">imagesLoaded</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
              $newElems<span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span> opacity<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
              $container<span class="token punctuation">.</span><span class="token function">masonry</span><span class="token punctuation">(</span> <span class="token string">'appended'</span><span class="token punctuation">,</span> $newElems<span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
              <span class="token function">layOutCallBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>jQuery<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h1 id="移动端"><a href="#移动端" class="header-anchor">#</a> 移动端</h1> <ul><li>判断IOS, 安卓
<ul><li><a href="http://caibaojian.com/browser-ios-or-android.html" target="_blank" rel="noopener noreferrer">http://caibaojian.com/browser-ios-or-android.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> u <span class="token operator">=</span> navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">,</span> app <span class="token operator">=</span> navigator<span class="token punctuation">.</span>appVersion<span class="token punctuation">;</span>
<span class="token keyword">var</span> isAndroid <span class="token operator">=</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Android'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">||</span> u<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">'Linux'</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">//android终端或者uc浏览器</span>
<span class="token keyword">var</span> isiOS <span class="token operator">=</span> <span class="token operator">!</span><span class="token operator">!</span>u<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/\(i[^;]+;( U;)? CPU.+Mac OS X/</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//ios终端</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'是否是Android：'</span><span class="token operator">+</span>isAndroid<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'是否是iOS：'</span><span class="token operator">+</span>isiOS<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li><p>iOS，Safari浏览器，input等表单focus后fixed元素错位问题</p> <ul><li><a href="https://www.snip2code.com/Snippet/176582/--iOS-Safari----input---focus-fixed-----" target="_blank" rel="noopener noreferrer">https://www.snip2code.com/Snippet/176582/--iOS-Safari----input---focus-fixed-----<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>
<span class="token keyword">if</span><span class="token punctuation">(</span> <span class="token regex">/iPhone|iPod|iPad/i</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>

  <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'focus'</span><span class="token punctuation">,</span> <span class="token string">'input, textarea'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'header'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">&quot;position&quot;</span><span class="token punctuation">,</span> <span class="token string">'absolute'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'footer'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">&quot;position&quot;</span><span class="token punctuation">,</span> <span class="token string">'absolute'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'blur'</span><span class="token punctuation">,</span> <span class="token string">'input, textarea'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'header'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">&quot;position&quot;</span><span class="token punctuation">,</span> <span class="token string">'fixed'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'footer'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">&quot;position&quot;</span><span class="token punctuation">,</span> <span class="token string">'fixed'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="微信"><a href="#微信" class="header-anchor">#</a> 微信</h1> <ul><li><p>weixin</p> <ul><li><a href="http://loo2k.com/blog/detecting-wechat-client/" target="_blank" rel="noopener noreferrer">http://loo2k.com/blog/detecting-wechat-client/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li> <li><p>JS接口安全域名不填写，分享onMenuShareAppMessage直接会取默认值。</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 分享onMenuShareAppMessage直接会取默认值</span>
</code></pre></div><ul><li>如何通过 js 修改微信浏览器的title?
<ul><li><a href="https://www.zhihu.com/question/26228251/answer/32405529" target="_blank" rel="noopener noreferrer">https://www.zhihu.com/question/26228251/answer/32405529<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> $body <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'title'</span><span class="token punctuation">;</span> <span class="token comment">// hack在微信等webview中无法修改document.title的情况    </span>
<span class="token keyword">var</span> $iframe <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'&lt;iframe src=&quot;/favicon.ico&quot;&gt;&lt;/iframe&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'load'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        $iframe<span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">'load'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendTo</span><span class="token punctuation">(</span>$body<span class="token punctuation">)</span>
</code></pre></div><ul><li>微信关闭当前页面</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">WeixinJSBridge</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">'closeWindow'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="适配"><a href="#适配" class="header-anchor">#</a> 适配</h1> <ul><li>rem计算适配
<ul><li><a href="http://isux.tencent.com/web-app-rem.html" target="_blank" rel="noopener noreferrer">http://isux.tencent.com/web-app-rem.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">doc<span class="token punctuation">,</span> win</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">var</span> docEl <span class="token operator">=</span> doc<span class="token punctuation">.</span>documentElement<span class="token punctuation">,</span>
      resizeEvt <span class="token operator">=</span> <span class="token string">'orientationchange'</span> <span class="token keyword">in</span> window <span class="token operator">?</span> <span class="token string">'orientationchange'</span> <span class="token operator">:</span> <span class="token string">'resize'</span><span class="token punctuation">,</span>
      <span class="token function-variable function">recalc</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token keyword">var</span> clientWidth <span class="token operator">=</span> docEl<span class="token punctuation">.</span>clientWidth<span class="token punctuation">;</span>
          <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>clientWidth<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
          docEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> <span class="token number">20</span> <span class="token operator">*</span> <span class="token punctuation">(</span>clientWidth <span class="token operator">/</span> <span class="token number">320</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px'</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>doc<span class="token punctuation">.</span>addEventListener<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
  win<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>resizeEvt<span class="token punctuation">,</span> recalc<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  doc<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> recalc<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>document<span class="token punctuation">,</span> window<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li><p>另外一种rem方案</p> <ul><li><a href="http://www.html-js.com/article/3041" target="_blank" rel="noopener noreferrer">http://www.html-js.com/article/3041<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> dpr<span class="token punctuation">,</span> rem<span class="token punctuation">,</span> scale<span class="token punctuation">;</span>
<span class="token keyword">var</span> docEl <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">;</span>
<span class="token keyword">var</span> fontEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'style'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> metaEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'meta[name=&quot;viewport&quot;]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

dpr <span class="token operator">=</span> window<span class="token punctuation">.</span>devicePixelRatio <span class="token operator">||</span> <span class="token number">1</span><span class="token punctuation">;</span>
rem <span class="token operator">=</span> docEl<span class="token punctuation">.</span>clientWidth <span class="token operator">*</span> <span class="token number">2</span> <span class="token operator">/</span> <span class="token number">10</span><span class="token punctuation">;</span>
scale <span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">/</span> dpr<span class="token punctuation">;</span>


<span class="token comment">// 设置viewport，进行缩放，达到高清效果</span>
metaEl<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'content'</span><span class="token punctuation">,</span> <span class="token string">'width='</span> <span class="token operator">+</span> dpr <span class="token operator">*</span> docEl<span class="token punctuation">.</span>clientWidth <span class="token operator">+</span> <span class="token string">',initial-scale='</span> <span class="token operator">+</span> scale <span class="token operator">+</span> <span class="token string">',maximum-scale='</span> <span class="token operator">+</span> scale <span class="token operator">+</span> <span class="token string">', minimum-scale='</span> <span class="token operator">+</span> scale <span class="token operator">+</span> <span class="token string">',user-scalable=no'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 设置data-dpr属性，留作的css hack之用</span>
docEl<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'data-dpr'</span><span class="token punctuation">,</span> dpr<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 动态写入样式</span>
docEl<span class="token punctuation">.</span>firstElementChild<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>fontEl<span class="token punctuation">)</span><span class="token punctuation">;</span>
fontEl<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'html{font-size:'</span> <span class="token operator">+</span> rem <span class="token operator">+</span> <span class="token string">'px!important;}'</span><span class="token punctuation">;</span>

<span class="token comment">// 给js调用的，某一dpr下rem和px之间的转换函数</span>
window<span class="token punctuation">.</span><span class="token function-variable function">rem2px</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    v <span class="token operator">=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> v <span class="token operator">*</span> rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function-variable function">px2rem</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    v <span class="token operator">=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> v <span class="token operator">/</span> rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

window<span class="token punctuation">.</span>dpr <span class="token operator">=</span> dpr<span class="token punctuation">;</span>
window<span class="token punctuation">.</span>rem <span class="token operator">=</span> rem<span class="token punctuation">;</span>
</code></pre></div><ul><li>px转换为rem代码</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> deviceWidth <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientWidth<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>deviceWidth <span class="token operator">&gt;</span> <span class="token number">640</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    deviceWidth <span class="token operator">=</span> <span class="token number">640</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>deviceWidth <span class="token operator">&lt;</span> <span class="token number">320</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    deviceWidth <span class="token operator">=</span> <span class="token number">320</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> deviceWidth <span class="token operator">/</span> <span class="token number">3.75</span> <span class="token operator">+</span> <span class="token string">'px'</span><span class="token punctuation">;</span>

<span class="token comment">//此部分是设计稿宽度为375px的，这边设置为3.75  页面调用时，如果实际设计稿为760px，那边这边的3.75数值改为7.60</span>
window<span class="token punctuation">.</span><span class="token function-variable function">onresize</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> deviceWidth <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientWidth<span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>deviceWidth <span class="token operator">&gt;</span> <span class="token number">640</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        deviceWidth <span class="token operator">=</span> <span class="token number">640</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>deviceWidth <span class="token operator">&lt;</span> <span class="token number">320</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        deviceWidth <span class="token operator">=</span> <span class="token number">320</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> deviceWidth <span class="token operator">/</span> <span class="token number">3.75</span> <span class="token operator">+</span> <span class="token string">'px'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="支付"><a href="#支付" class="header-anchor">#</a> 支付</h1> <ul><li>支付接口方法调用必须在addevent里边调用
<ul><li><a href="http://www.cnblogs.com/true_to_me/p/3565039.html" target="_blank" rel="noopener noreferrer">http://www.cnblogs.com/true_to_me/p/3565039.html<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'WeixinJSBridgeReady'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">onBridgeReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    that<span class="token punctuation">.</span><span class="token function">initOrder</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>支付接口方法调用</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>WeixinJSBridge<span class="token punctuation">.</span><span class="token function">invoke</span><span class="token punctuation">(</span><span class="token string">'getBrandWCPayRequest'</span><span class="token punctuation">,</span> d<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>err_msg <span class="token operator">==</span> <span class="token string">&quot;get_brand_wcpay_request:ok&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// alert(&quot;支付成功&quot;);</span>
        <span class="token comment">// union.release(d.orderId);</span>
        <span class="token function">resetUrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">paySuccess</span><span class="token punctuation">(</span><span class="token string">'home'</span><span class="token punctuation">,</span> d<span class="token punctuation">.</span>orderId<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token function">cancelOrder</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span>orderId<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// alert(res.err_msg);</span>
    <span class="token punctuation">}</span>
    loading<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h1 id="从全局捕获错误"><a href="#从全局捕获错误" class="header-anchor">#</a> 从全局捕获错误</h1> <div class="language-js extra-class"><pre class="language-js"><code>window<span class="token punctuation">.</span><span class="token function-variable function">onerror</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">errMsg<span class="token punctuation">,</span> scriptURI<span class="token punctuation">,</span> lineNumber<span class="token punctuation">,</span> columnNumber<span class="token punctuation">,</span> errorObj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> rst <span class="token operator">=</span> <span class="token punctuation">{</span>
            <span class="token string">&quot;错误信息：&quot;</span><span class="token operator">:</span> errMsg<span class="token punctuation">,</span>
            <span class="token string">&quot;出错文件：&quot;</span><span class="token operator">:</span> scriptURI<span class="token punctuation">,</span>
            <span class="token string">&quot;出错行号：&quot;</span><span class="token operator">:</span> lineNumber<span class="token punctuation">,</span>
            <span class="token string">&quot;出错列号：&quot;</span><span class="token operator">:</span> columnNumber<span class="token punctuation">,</span>
            <span class="token string">&quot;错误详情：&quot;</span><span class="token operator">:</span> errorObj
        <span class="token punctuation">}</span><span class="token punctuation">;</span>

        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>rst<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/plana/nav.4.ui-javascript/ch3-component-mvc/libs/01--ti-gang--qian-duan--chang-jian-ye-wu-wen-ti.html" class="prev">
        [提纲]前端-常见业务问题
      </a></span> <span class="next"><a href="/plana/nav.4.ui-javascript/ch3-component-mvc/mvc/case/01--ji-chu-angularjs-old.html">
        [基础]Angularjs
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/plana/assets/js/app.26a35d46.js" defer></script><script src="/plana/assets/js/2.b5bc497d.js" defer></script><script src="/plana/assets/js/379.8567246b.js" defer></script>
  </body>
</html>
